File

core/stepper/stepper.component.ts

Description

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>

Extends

CdkStepper

Implements

AfterContentInit OnDestroy ProductExperienceEventSource

<!-- override icons -->
 <ng-template c8yStepperIcon="final">
  <span [c8yIcon]="'hand-peace-o'"></span>
 </ng-template>

<cdk-step state="final" label="Job done!">
 <div class="m-l-40 m-r-40 m-t-32">
   <h4 class="p-b-32" style="text-align: center;" translate>
    Your Superhero is now ready to save the world!
  </h4>
 </div>
 <c8y-stepper-buttons
   [hidden]="!isModal"
   (onBack)="close()"
   [labels]="{ back: 'Got it!' }"
 ></c8y-stepper-buttons>
 <c8y-stepper-buttons [hidden]="isModal"></c8y-stepper-buttons>
</cdk-step>