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 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.
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.
The step indicators are rendered when the
stepTypeproperty is set toindicatoror tofull.
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.
Step Template
To display custom content and override the appearance of the whole step, utilize the kendoStepperStepTemplate.