Overview

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 2.0.

Defining Header and Footer

Defining a list header or list footer on RadListViewComponent via Angular 2.0 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>
    <template tkListItemTemplate let-item="item">
        <StackLayout orientation="vertical">
            <Label class="nameLabel" [text]="item.name"></Label>
            <Label class="descriptionLabel" [text]="item.description"></Label>
        </StackLayout>
    </template>
    <template tkListViewHeader>
        <GridLayout backgroundColor="#65a565">
            <Label text="This is the list header"></Label>
        </GridLayout>
    </template>
    <template tkListViewFooter>
        <GridLayout backgroundColor="#7fff7f">
            <Label text="This is the list footer"></Label>
        </GridLayout>
    </template>
</RadListView>

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