RadListView for Angular - Getting started

RadListView for Angular 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. The code snippets from this section are available as a standalone demo application.

Installation

Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-listview

Adding a RadListView to your template

Before proceeding, make sure that the NativeScriptUIListViewModule from the nativescript-ui-listview plugin has been imported in an ngModule in your app. For example:

import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";

@NgModule({
    schemas: [NO_ERRORS_SCHEMA],
    imports: [
        ....
        NativeScriptUIListViewModule,
        ....
    ],
    declarations: [
        ....
    ]
})
export class ListViewExamplesModule { }

Demo.

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">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical">
                <Label class="nameLabel" [text]="item.name"></Label>
                <Label class="descriptionLabel" [text]="item.description"></Label>
            </StackLayout>
        </ng-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 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.

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Getting Started Example

NativeScript Angular

RadListView for Angular - Getting started

Installation

Adding a RadListView to your template

References