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]