New to Kendo UI for Angular? Start a free 30-day trial
TimelineCardHeaderTemplateDirective
Specifies the header of each timeline card. To define a header template, nest an <ng-template>
tag
with the kendoTimelineCardHeaderTemplate
directive inside the <kendo-timeline>
tag.
The following values are available as context variables:
let-event="event"
(TimelineEvent
)—The current card's event. Also available as implicit context variable.let-index="index"
(number
)—The current event index.
html
<kendo-timeline [events]="events">
<ng-template kendoTimelineCardHeaderTemplate let-event let-index="index">
<span class="k-event-title">Title: {{ event.title }}</span>
<div kendoCardSubtitle>Event number {{ index }}</div>
</ng-template>
</kendo-timeline>
Selector
[kendoTimelineCardHeaderTemplate]