RadListView for Angular 2.0: Getting started

RadListView for Angular 2.0 is exposed through the RadListViewComponent class. This article will guide you through the process of adding a RadListViewComponent in your application, binding it to a data-source and visualizing the items by using an item template of your choice. For more information on how each separate feature of RadListViewComponent is used, please refer to the dedicated articles which are using the same scenario and extend it further. This article assumes that you have successfully installed Telerik UI for NativeScript following the Getting started article.

Adding a RadListView to your template

To add an instance of RadListViewComponent in an Angular template you need to use the <RadListView></RadListView> tag. You will also need to bind the control to a source of items and define an item template which will determine how each business object from the source collection will be visualized. The following snippet demonstrates this:

<GridLayout tkExampleTitle tkToggleNavButton>
    <RadListView [items]="dataItems">
        <template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical">
                <Label class="nameLabel" [text]="item.name"></Label>
                <Label class="descriptionLabel" [text]="item.description"></Label>
            </StackLayout>
        </template>
    </RadListView>
</GridLayout>

The source collection here is exposed through a property on the component called dataItems. Here's how the component looks like:

export class ListViewGettingStartedComponent implements OnInit {
    private _dataItems: ObservableArray<DataItem>;

    constructor(private _dataItemService: DataItemService) {
    }

    get dataItems(): ObservableArray<DataItem> {
        return this._dataItems;
    }

    ngOnInit() {
        this._dataItems = new ObservableArray(this._dataItemService.getDataItems());
    }
}

Following the Angular 2.0 best practices, we have separated the data from the UI by providing the data items via a service called DataItemService that exposes a getDataItems() method which in retrieves the source collection.