• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

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:

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme: