core/stepper/stepper-buttons.component.ts
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.
<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();
}
AfterContentInit
OnDestroy
| selector | c8y-stepper-buttons |
| templateUrl | ./stepper-buttons.component.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
constructor(stepper: C8yStepper, step: CdkStep, gainsightService: GainsightService)
|
||||||||||||
|
Parameters :
|
| 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 |
Type : 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 : |
| 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. |
| 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
|
| forceShowBtns |
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. |
| 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 :
Parameters :
Returns :
void
|
<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>