Timeline Templates
The Kendo UI for Angular Timeline enables to define your own template for rendering the events data so that you can customize it to your needs instead of using the default card.
To define a template, nest an <ng-template> tag inside the <kendo-timeline> tag and apply one of the following directives to it:
kendoTimelineCardHeaderTemplate—Specifies the content of card header.kendoTimelineCardBodyTemplate—Specifies the content of the card body.kendoTimelineCardActionsTemplate—Specifies the content of the card actions.
Card Header Template
You can customize the look of the card header by using the kendoTimelineCardHeaderTemplate directive. Apply the directive to an <ng-template> tag nested within the <kendo-timeline> tag. The template context is set to the current event. To get a reference to the current event, use the let-event directive. The index of the current event is also available in the template through the index field.
Card Body Template
You can customize the look of the card header by using the kendoTimelineCardBodyTemplate directive. Apply the directive to an <ng-template> tag nested within the <kendo-timeline> tag. The template context is set to the current event. To get a reference to the current event, use the let-event directive. The index of the current event is also available in the template through the index field.
Card Actions Template
You can customize the look of the card header by using the kendoTimelineCardActionsTemplate directive. Apply the directive to an <ng-template> tag nested within the <kendo-timeline> tag. The template context is set to the current event. To get a reference to the current event, use the let-event directive. The index of the current event is also available in the template through the index field.