core/stepper/stepper.component.ts
C8yStepper extends the CdkStepper. You can use cdk based functionality and inputs. Additional to that you are able to modify the behavior and also the look and feel when using the C8yStepper.
The C8yStepper is used to present any step-based process to the user. A stepper, C8yStepper and/or CdkStepper is the parent of cdk-steps. Each cdk-step represents one step in the whole process that you want to provide to the user.
The C8yStepper will create, based on the given cdk-steps, a kind of stepper-progress which looks like this: (1)---(2)---(3)---(n) The stepper will handle the state of each step and provides styles for active steps, done-steps or in edit-mode. You are able to override icons for each step in the stepper-progress with a template. You are also able to activate default-icons for states like 'edit' and 'done'.
To force users through every provided step, set the stepper to 'linear'. This will disable the possibility to move for example from step one to step three.
Whenever it comes to validation try to use formGroups. It is possible to assign a formGroup to a cdk-step input called [stepControl], which automatically respects the validation-rules that you created for this formGroup. If fields are required but not filled or any other validation, like a pattern, is not matched the formGroup will be invalid. In this case stepping in a linear stepper to the next step gets impossible.
If there is the need to execute asynchronous code you have at least two possibilities. First: As you learned, a cdk-step works with formGroups and Validators, so you are able to use asyncValidators as well. Second: The C8yStepper provides an event-emitter onStepChange which is called whenever a step-button (1)--(2)--(n) in the stepper-progress is clicked. The event of this emitter holds the index of the step as number. You can use this EventEmitter to call for example a custom navigate-method which performs first any async-call and then moves on to the given step.
<c8y-stepper
(onStepChange)="navigate($event)"
[disableDefaultIcons]="{ edit: true, done: false }"
[customClasses]="['m-l-40', 'm-r-40', 'm-t-32']"
linear
>
<!-- override icons -->
<ng-template c8yStepperIcon="final">
<span [c8yIcon]="'hand-peace-o'"></span>
</ng-template>
<cdk-step [stepControl]="formGroupStepOne" label="Name of the hero">
<div class="m-l-40 m-r-40 m-t-32">
<h4 class="p-b-8" translate>What is the name of your hero?</h4>
<c8y-form-group>
<div [formGroup]="formGroupStepOne">
<input
class="form-control"
type="text"
formControlName="name"
placeholder="Mister X"
#nameRef
required
/>
<c8y-messages>
<c8y-message *ngIf="!formGroupStepOne.untouched && !nameRef.value" translate
>Enter the name of the Superhero</c8y-message
>
</c8y-messages>
</div>
</c8y-form-group>
</div>
<c8y-stepper-buttons></c8y-stepper-buttons>
</cdk-step>
<cdk-step>
...
</cdk-step state="final">
</c8y-stepper>
AfterContentInit
OnDestroy
ProductExperienceEventSource
providers |
{ provide: CdkStepper, useExisting: C8yStepper }
{ provide: PRODUCT_EXPERIENCE_EVENT_SOURCE, useExisting: forwardRef(() => C8yStepper) }
|
selector | c8y-stepper |
templateUrl | ./stepper.component.html |
Properties |
Methods |
Inputs |
Outputs |
customClasses |
Type : string[]
|
Optional Possibility to add any kind of custom css classes to the step-header |
disableDefaultIcons |
Type : literal type
|
Default value : { edit: true, done: true }
|
Optional Indicator if icons for edit and done state should be shown in step-header buttons |
disableProgressButtons |
Type : boolean
|
Default value : false
|
Optional Disable/enable navigation by stepper progress buttons default: false |
hideStepProgress |
Type : boolean
|
Default value : false
|
Optional Possibility to hide the stepper progress completely. |
onStepChange |
Type : EventEmitter
|
Will emit the step index number whenever a step-header button was clicked It listens to the stepIndex Subject. |
getIndicatorType | ||||||||||||
getIndicatorType(index: number, state: StepState)
|
||||||||||||
Manipulates the state based on the disabledDefaultIcons Input() Changing edit or done to false will change the icons within step-header buttons
Parameters :
Returns :
StepState
|
setIndex | ||||||||
setIndex(index: number)
|
||||||||
Pushes the step index to the subject
Parameters :
Returns :
void
|
_iconOverrides |
Type : literal type
|
Default value : {}
|
Consumer-specified template-refs to be used to override the header icons. |
_icons |
Type : QueryList<C8yStepperIcon>
|
Decorators :
@ContentChildren(C8yStepperIcon, {descendants: true})
|
Holding a QueryList of C8yStepperIcons These are templateRefs which overrides any step-header button icon with matching state of cdk-step
|
productExperienceEvent |
Type : ProductExperienceEvent
|
<ul *ngIf="!hideStepProgress" class="c8y-stepper" [ngClass]="customClasses">
<li *ngFor="let step of steps; let i = index">
<c8y-stepper-progress
[iconOverrides]="_iconOverrides"
[state]="getIndicatorType(i, step.state)"
[index]="i"
[selected]="selectedIndex === i"
[disabled]="disableProgressButtons"
(onStepClicked)="setIndex($event)"
title="{{ step.label | translate }}"
[ngClass]="{'active': selectedIndex === i}"
>
</c8y-stepper-progress>
<div class="c8y-step__label" title="{{ step.label | translate }}">
{{ step.label | translate }}
</div>
</li>
</ul>
<ng-container [ngTemplateOutlet]="selected.content"></ng-container>