New to Kendo UI for Angular? Start a free 30-day trial

Templates

The ActionSheet component contains the following building blocks:

  • Header—Rendered on top of the content. By default, it includes a title and a subtitle.
  • Content—Renders the main content area of the ActionSheet. By default, it contains a list of items that could be optionally split in two groups. The content can be completely customized.
  • Footer—Rendered below the content if an ActionSheetFooterTemplate is provided.

The ActionSheet allows you to use templates to customize the appearance of its building blocks.

To define a template, nest an <ng-template> tag inside the tag and apply one of the following directives to it:

  • kendoActionSheetItemTemplate—Specifies the list items content, when an items collection is provided.
  • kendoActionSheetHeaderTemplate—Specifies the header section of the ActionSheet.
  • kendoActionSheetContentTemplate—Overrides the Content building block section.
  • kendoActionSheetFooterTemplate—Specifies the footer area of the ActionSheet.
  • kendoActionSheetTemplate—Overrides all building blocks of the component.

Item Template

When the ActionSheet renders an items collection, you could use the ActionSheetItemTemplate directive and gain full control over the appearance of each item. To access a reference to the current item, use the item field passed by the template:

<kendo-actionsheet *ngIf="opened" [items]="items">
    <ng-template kendoActionSheetItemTemplate let-item>
        <p>{{item.title}}</p>
    </ng-template>
</kendo-actionsheet>

The following example demonstrates the ActionSheetItemTemplate in action.

Example
View Source
Change Theme:

Header Template

Use the ActionSheetHeaderTemplate directive to customize the header section of the ActionSheet.

The kendoActionSheetHeaderTemplate directive overrides the ActionSheet title and subtitle options.

The following example demonstrates the ActionSheetHeaderTemplate in action.

Example
View Source
Change Theme:

Content Template

The ActionSheetContentTemplate directive allows you to completely customize the main content area of the ActionSheet. This enables you to render custom content even when an items collection is not provided.

The following example demonstrates the ActionSheetContentTemplate in action.

Example
View Source
Change Theme:

Use the ActionSheetFooterTemplate directive to render a footer below the Content ActionSheet area.

The following example demonstrates the ActionSheetFooterTemplate in action.

Example
View Source
Change Theme:

ActionSheet Template

Use the ActionSheetTemplate directive to display custom content inside the ActionSheet.

When the kendoActionSheetTemplate directive is used, only the contents inside its ng-template element will be displayed. All other template directives will be ignored.

The following example demonstrates the ActionSheetTemplate in action.

Example
View Source
Change Theme: