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.

Example :
<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

Metadata

Index

Properties
Methods
Inputs
Outputs

Inputs

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.

useStepLabelsAsTitlesOnly
Type : boolean
Default value : false

Optional If true, the label defined on a cdk-step won't get rendered below each step-header button. Instead, it will be used as a title only.

Outputs

onStepChange
Type : EventEmitter

Will emit the step index number whenever a step-header button was clicked It listens to the stepIndex Subject.

Methods

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 :
Name Type Optional Description
index number No

step index

state StepState No

step state, like 'done', 'edit', 'error'

Returns : StepState
setIndex
setIndex(index: number)

Pushes the step index to the subject

Parameters :
Name Type Optional Description
index number No

step index

Returns : void

Properties

_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

Example :
<!-- 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>
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 *ngIf="!useStepLabelsAsTitlesOnly" class="c8y-step__label"  title="{{ step.label | translate }}">
      {{ step.label | translate }}
    </div>
  </li>
</ul>
<ng-container [ngTemplateOutlet]="selected.content"></ng-container>

results matching ""

    No results matching ""