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 you to fully customize the appearance of the steps.
The purpose of each step is solely representational and informative. Thus, placing any interactive elements (such as inputs or buttons) inside the steps should be avoided, as it may cause UX discrepancies.
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
The step indicators are rendered when the
stepTypeproperty is set to
stepType property is set to
full, a label will be rendered for each step. You can customize the look of the step labels by using the
To display custom content and override the appearance of the whole step, utilize the