Listview

Using a ListView control inside Angular app requires some special attention due to the complexity of the NativeScript ListView control, with custom item templates, bindings and so on.

The NativeScript-angular plugin provides a custom Angular component which simplifies the way native ListView is used.

Note: Using the ListView component inside a ScrollView or ScrollView inside the ListView's items can lead to a poor user interface performance and can reflect the user experience. For avoiding those issues, we should specify the height explicitly for the ListView in the scenario when the ListView is nested in ScrollView and the ScrollView's height - when the component is used inside the ListView. Example 1 (ListView in ScrollView):
<ScrollView>
    <StackLayout>
        <ListView height="150" [items]="countries">
            <ng-template let-country="item" let-i="index" let-odd="odd" let-even="even">
                
            </ng-template>
        </ListView>
    </StackLayout>
</ScrollView>
Example 2 (ScrollView in ListView):
<ListView [items]="countries">
    <ng-template let-country="item" let-i="index" let-odd="odd" let-even="even">
        <StackLayout>
            <ScrollView height="150" >
                
            </ScrollView>
        </StackLayout>
    </ng-template>
</ListView>

This example demonstrates how to use OnChanges to trigger updates in child components for data passed from parent component. The data is pased with @Input and the change is triggered via`ngOnChanges with injecting SimpleChanges in the child's constructor.

TypeScript

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({
    selector: "sdk-child-component",
    moduleId: module.id,
    template: `
        <StackLayout orientation="horizontal">
            <Label text="This is item with ID: " class="m-16" textWrap="true"></Label>
            <Label [text]="myData.id" textWrap="true"></Label>
        </StackLayout>
    `
})
export class ItemComponent implements OnChanges {
    @Input() data: any;
    public myData: any;

    ngOnChanges(changes: SimpleChanges) {
        this.myData = changes["data"].currentValue;
    }
}

@Component({
    styleUrls: ["./update-child-component.component.css"],
    moduleId: module.id,
    templateUrl: "./update-child-component.component.html"
})
export class UpdateChildComponent {
    public items: Array<any> = [];

    constructor() {
        for (let index = 0; index < 20; index++) {
            this.items.push({ "id": index + 1 });
        }
    }
}

Improve this document

Demo Source

Using Async Pipe

An Angular pipe is a simple display-value transformation that can be declared in HTML. A pipe takes an input and transforms it to a desired output. One of the built-in Angular pipes is very commonly used with ListView like controls. This is the async pipe. The input of this pipe is either Promise or Observable (Observable actually stands for RxJS.Observable). This pipe subscribes to the observable and returns the value inside of it as a property value. The following is a simple example of using async pipe with the NativeScript-Angular ListView.

import { Component, ChangeDetectionStrategy } from "@angular/core";
import { Observable as RxObservable } from "rxjs";

export class DataItem {
    constructor(public id: number, public name: string) { }
}

@Component({
    moduleId: module.id,
    styleUrls: ["./using-async-pipe.component.css"],
    templateUrl: "./using-async-pipe.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UsingAsyncPipeComponent {
    public myItems: RxObservable<Array<DataItem>>;

    constructor() {
        let items = [];
        for (let i = 0; i < 3; i++) {
            items.push(new DataItem(i, "data item " + i));
        }

        let subscr;
        this.myItems = RxObservable.create(subscriber => {
            subscr = subscriber;
            subscriber.next(items);
            return function () {
                console.log("Unsubscribe called!");
            };
        });

        let counter = 2;
        let intervalId = setInterval(() => {
            counter++;
            items.push(new DataItem(counter + 1, "data item " + (counter + 1)));
            subscr.next(items);
        }, 1000);

        setTimeout(() => {
            clearInterval(intervalId);
        }, 15000);
    }
}

Improve this document

Demo Source

API Reference for the ListView Class

Native Component

Android	iOS
android.widget.ListView	UITableView

NativeScript Angular

Listview

Creating Listview

Customizing Listview

Update Child Component

Using Async Pipe