NativeScript Angular

RadListView Header and Footer

Header and Footer are a special kind of elements that are displayed at the beginning and at the end of the scrollable data list. They are part of the core functionality of RadListView and are exposed through two separate directives. This article explains how Header and Footer are defined on RadListViewComponent with Angular.

Defining a list header or list footer on RadListViewComponent via Angular is done easily with the corresponding directives:

The following code snippet demonstrates a sample scenario in which a header and a footer are defined on a RadListView instance:

<RadListView [items]="dataItems" tkExampleTitle tkToggleNavButton>
    <ng-template tkListItemTemplate let-item="item">
        <StackLayout orientation="vertical">
            <Label class="nameLabel" [text]=""></Label>
            <Label class="descriptionLabel" [text]="item.description"></Label>
    <ng-template tkListViewHeader>
        <Label text="This is list header" class="header"></Label>
    <ng-template tkListViewFooter>
        <Label text="This is list footer" class="footer"></Label>

The HTML snippet is then used in context with the following component to display a list with a header and a footer: