core/stepper/stepper-buttons.component.ts

Description

C8yStepperButtons provides a convenient way to have, according to the C8yStepper and each cdk-step, buttons to navigate between steps or to cancel the whole step-process. Buttons rendered with the help of this component will use the branding css.

By default all steps with this component in use will render a next button, expect the last step. The other way around, every step using this component will render a back button, expect the first step. To get a cancel button rendered you need to handle the onCancel event. For next and back button you don't need to handle the available events onNext and onBack because default behavior is implemented. The default will just call, according to the button, the stepper.next() or stepper.previous() methods and moves the stepper forth or back. Using the EventEmitter onNext and onBack will emit for you the following object: {stepper: C8yStepper, step: CdkStep}. This is useful if you need to implement custom logic before moving to the next step or sending data to a backend. In this case you need to tell the stepper to move forward or back on your own.

With the component input [labels] you can change the label of each button in each step. It takes an object like this: {next?: string, back?: string, cancel?: string}

The [pending] input is of type boolean and will enable css animation for the next button when true.

If the cdk-step provides a stepControl the component will set the next button disabled when the formGroup behind it is invalid. As long as the [pending] input is true the back and next button is also disabled. This will prevent multiple clicks while running a request or stepping back while a request is ongoing.

Example :

<c8y-stepper>
 <cdk-step>
   <!--
     your html code
         ...
         ...    -->
   <c8y-stepper-buttons
    (onNext)="save()"
    [labels]="{ next: 'Save' }"
    [pending]="pendingStatus"
    ></c8y-stepper-buttons>
 </cdk-step>
</c8y-stepper>

Example :

// in your component:
async save() {
  this.pendingStatus = true;
  // your async request goes here ...
  // await something();
  this.pendingStatus = false;
  this.stepper.next();
}

Implements

AfterContentInit OnDestroy

Example

Metadata

selector	`c8y-stepper-buttons`
standalone	`true`
imports	`NgIf` `NgClass` `C8yTranslatePipe`
templateUrl	`./stepper-buttons.component.html`

Relationships

Used by

Depends on

NgIf
NgClass
C8yTranslatePipe
AfterContentInit
OnDestroy

<div class="text-center">
  <button
    class="btn btn-default"
    title="{{ labels?.cancel || 'Cancel' | translate }}"
    data-cy="cancel"
    type="button"
    *ngIf="showBtns.cancel"
    (click)="cancel()"
  >
    <span
      title="{{ labels?.cancel | translate }}"
      *ngIf="labels?.cancel; else cancelLabel"
    >
      {{ labels?.cancel | translate }}
    </span>
    <ng-template #cancelLabel>
      <span title="{{ 'Cancel' | translate }}">{{ 'Cancel' | translate }}</span>
    </ng-template>
  </button>
  <button
    class="btn btn-default"
    title="{{ labels?.back || 'Back' | translate }}"
    type="button"
    *ngIf="showBtns.back"
    (click)="back()"
    [disabled]="pending"
    data-cy="back"
  >
    <span
      title="{{ labels?.back | translate }}"
      *ngIf="labels?.back; else backLabel"
    >
      {{ labels?.back | translate }}
    </span>
    <ng-template #backLabel>
      <span title="{{ 'Back' | translate }}">{{ 'Back' | translate }}</span>
    </ng-template>
  </button>
  <button
    class="btn"
    title="{{ labels?.custom || 'Complete' | translate }}"
    type="button"
    *ngIf="showBtns.custom"
    (click)="custom()"
    [ngClass]="{
      'btn-default': showBtns.next,
      'btn-primary': !showBtns.next,
      'btn-pending': pending
    }"
    [disabled]="disabled"
    data-cy="custom"
  >
    <span
      title="{{ labels?.custom | translate }}"
      *ngIf="labels?.custom; else customLabel"
    >
      {{ labels?.custom | translate }}
    </span>
    <ng-template #customLabel>
      <span title="{{ 'Complete' | translate }}">{{ 'Complete' | translate }}</span>
    </ng-template>
  </button>
  <button
    class="btn btn-primary"
    title="{{ labels?.next || 'Next' | translate }}"
    type="button"
    (click)="next()"
    *ngIf="showBtns.next"
    [ngClass]="{ 'btn-pending': pending }"
    [disabled]="disabled"
    data-cy="next"
  >
    <span
      title="{{ labels?.next | translate }}"
      *ngIf="labels?.next; else nextLabel"
    >
      {{ labels?.next | translate }}
    </span>
    <ng-template #nextLabel>
      <span title="{{ 'Next' | translate }}">{{ 'Next' | translate }}</span>
    </ng-template>
  </button>
  <ng-content select="button"></ng-content>
</div>