Implement with Angular

[leocaseiro]

Hi @rajivnarayana,

I'm trying to implement this plugin with Angular, however, I'm struggling to register the custom <itemTemplate> and the <headerTemplate>.

The only thing missing is customising the template which by default, is showing: [object Object].

I know in A{N} I have to create my item using let-item, but let doesn't work with any other element besides <template>:

ERROR

 "let-" is only supported on template elements. ("     
                <SectionedListView [items]="sectionedArray" rowHeight="44">
                    <itemTemplate [ERROR ->]let-item="item">
                        <Label [text]="item.name"></Label>
                    </itemTemplate>
        "): SectionedListViewComponent@4:26

Do you know how does work?

MY CODE:

import {Component} from '@angular/core';
import {registerElement} from "nativescript-angular/element-registry";

var observableSectionArrayModule = require("observable-sectioned-array");

registerElement('SectionedListView', () => require("nativescript-sectioned-list-view").SectionedListView);

@Component({
    selector: 'core-sectioned-listview',
    template: `
        <SectionedListView [items]="sectionedArray" rowHeight="44">
            <itemTemplate let-item="item">
                <Label [text]="item.name"></Label>
            </itemTemplate >
            <headerTemplate>
                <Label [text]="$value"></Label>
            </headerTemplate>
        </SectionedListView>
    `,
})
export class CoreSectionedListView {

    items: any;
    sectionedArray: any;

    constructor() {
        this.items = [
            {"name" : "Alice", gender:"female"},
            {"name": "Adam", gender: "male"},
            {"name": "Bob", gender: "male"},
            {"name": "Brittany", gender: "female"},
            {"name": "Evan", gender: "male"}
        ];

        var boys = this.items.filter(function(student) { return student.gender ==="male";});
        var girls = this.items.filter(function(student) { return student.gender ==="female";});

        this.sectionedArray = new observableSectionArrayModule.ObservableSectionArray();
        this.sectionedArray.addSection("Boys", boys);
        this.sectionedArray.addSection("Girls", girls);
    }

}

Result:

[leocaseiro]

I believe is something related to this https://docs.nativescript.org/angular/plugins/angular-third-party.html#views-and-templates

[rajivnarayana]

Looks like there is some additional work that needs to be done to adopt angular. Will look at this over the weekend. Thanks for filing this bug.

[stefalda]

Any news ? it would be great if it could work with Angular

[stefalda]

Hi,
after many tests I've been able to make the component work with Angular although in a hacky way.
I tried to create a custom directive but the component expects standard XML instead of angular html and I couldn't find a way to re-elaborate the already rendered component or to use the angular syntax to evaluate the variables...

Here's the final code I ended up putting together:

import {Component, Input, ViewChild, ElementRef} from "@angular/core";
import {SectionedListView} from "nativescript-sectioned-list-view";
import {registerElement} from "nativescript-angular/element-registry";
registerElement("SectionedListView", () => require("nativescript-sectioned-list-view").SectionedListView);

@Component({
    selector: 'sectioned-list-view-ng',
    template: `
        <SectionedListView 
            [items]="items"
                #sectionedListView>
        </SectionedListView>
    `
})
export class SectionedListViewComponent
{
    @Input()
    public items;

    @Input()
    public itemTemplate:string=`<Label text="{{$value}}" ></Label>`;

    @Input()
    public headerTemplate:string=`<Label text="{{$value}}" ></Label>`;

    @Input()
    public headerHeight:number=20;

    @Input()
    public rowHeight:number=40;


    @ViewChild("sectionedListView") 
    public listView: ElementRef;


    //Set the property
    ngAfterViewInit(): void {
        let sectionedListView:SectionedListView = this.listView.nativeElement;
        sectionedListView.headerHeight=this.headerHeight;
        sectionedListView.rowHeight=this.rowHeight;
        sectionedListView.itemTemplate = this.itemTemplate; 
        sectionedListView.headerTemplate = this.headerTemplate; 
    }

}

Now it's possible to use it passing the parameters from the angular html:

<sectioned-list-view-ng [items]="sectionedArray" rowHeight="40" headerHeight="20" 
        [itemTemplate]="itemTemplate" [headerTemplate]="headerTemplate">
</sectioned-list-view-ng>

passing the template for headers and items defining some strings variables...

public itemTemplate = `<Label text="{{$value.name}}"></Label>`;

public headerTemplate = `<Label text="{{$value}}"></Label>`;

I do hope this code helps someone else, and maybe someone can improve it and find a better syntax.

[moda20]

It is nearly a year now, did this get a fix ? because i having the same problems here

[MentalRender]

Me too, one year later. Any updates?

[rajivnarayana]

I am sorry that I have not replied. There is a RadListView which works on both iOS and Android where you can have item templates that can differentiate between a header and an item.

@MentalRender, I see you are already using it and I see you raised an issue over there too. Good luck.