File

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>

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

Implements

AfterContentInit OnDestroy

Metadata

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(stepper: C8yStepper, step: CdkStep, gainsightService: GainsightService)
Parameters :
Name Type Optional
stepper C8yStepper No
step CdkStep No
gainsightService GainsightService No

Inputs

disabled
Type : boolean
Default value : false

Disabled state of a button

labels
Type : literal type

Optional Specify custom labels for each button (cancel, back or next)

pending
Type : boolean
Default value : false

Optional Indicates if a request is pending and sets the next button to disabled when true

showButtons

This option forces the display of the buttons passed by the input. It will override the default settings and take precedence over the standard settings.

Example


<c8y-stepper-buttons
  [labels]="{ custom: 'Custom btn', cancel: 'Cancel btn' }"
  [showButtons]="{ custom: true, cancel: true }"
></c8y-stepper-buttons>

Outputs

onBack
Type : EventEmitter

EventEmitter which emits {stepper: C8yStepper; step: CdkStep} when back button is clicked.

onCancel
Type : EventEmitter

EventEmitter which emits when cancel button is clicked

onCustom
Type : EventEmitter

EventEmitter which emits when the optional custom button is clicked

onNext
Type : EventEmitter

EventEmitter which emits {stepper: C8yStepper; step: CdkStep} when next button is clicked.

Methods

back
back()

Gets called when back button is clicked. When onBack EventEmitter has an observer registered it will emit the following object {stepper: C8yStepper; step: CdkStep}. Otherwise it will call stepper.previous() as default.

Returns : void
cancel
cancel()

Gets called when cancel button is clicked. It will emit immediate.

Returns : void
custom
custom()

Gets called when the custom button is clicked. It will emit immediately.

Returns : void
next
next()

Gets called when next button is clicked. When onNext EventEmitter has an observer registered it will emit the following object {stepper: C8yStepper; step: CdkStep}. Otherwise it will call stepper.next() as default.

Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void

Properties

forceShowBtns
Type : boolean
Default value : false

Flag that indicates that the default settings defined in the showBtns have been overwritten.

showBtns
Type : StepperButtonsVisibility
Default value : { cancel: false, back: false, next: false, custom: false }

Indicator which button should be shown. Based on the cdk-steps within the c8y-stepper next and back buttons are rendered.

Accessors

showButtons
setshowButtons(btns: StepperButtonsVisibility)

This option forces the display of the buttons passed by the input. It will override the default settings and take precedence over the standard settings.

Example


<c8y-stepper-buttons
  [labels]="{ custom: 'Custom btn', cancel: 'Cancel btn' }"
  [showButtons]="{ custom: true, cancel: true }"
></c8y-stepper-buttons>
Parameters :
Name Type Optional Description
btns StepperButtonsVisibility No

An object that contains options for displaying buttons.

Example


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

results matching ""

    No results matching ""