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 Header and Footer

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

• ListViewHeaderDirective - used with the tkListViewHeader selector
• ListViewFooterDirective - used with the tkListViewFooter selector

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]="item.name"></Label>
            <Label class="descriptionLabel" [text]="item.description"></Label>
        </StackLayout>
    </ng-template>
    <ng-template tkListViewHeader>
        <Label text="This is list header" class="header"></Label>
    </ng-template>
    <ng-template tkListViewFooter>
        <Label text="This is list footer" class="footer"></Label>
    </ng-template>
</RadListView>

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