Templates

The Stepper allows you to use templates to customize the appearance of its steps.

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

  • "kendoStepperIndicatorTemplate"Specifies the content of the step indicator.
  • "kendoStepperLabelTemplate"Specifies the content of the step label.
  • "kendoStepperStepTemplate" Completely overrides the content of the step. Allows full customizaton of the step appearance.

Indicator Template

You can customize the look of the step indicator by using the kendoStepperIndicatorTemplate directive. Apply the directive to an <ng-template> tag nested within the <kendo-stepper> tag. The template context is set to the current step. To get a reference to the current step, use the let-step directive. The index of the current step is also available in the template through the index field.

Note that the step indicators are rendered when the stepType property is set to indicator or full.

Example
View Source
Edit In Stackblitz  
Change Theme:

Label Template

When the stepType property is set to label or full, a label will be rendered for each step. You can customize the look of the step labels by using the kendoStepperLabelTemplate.

Example
View Source
Edit In Stackblitz  
Change Theme:

Step Template

To display custom content and override the appearance of the whole step, utilize the kendoStepperStepTemplate.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?