projects/storefrontlib/shared/components/progress-button/progress-button.component.ts
| selector | cx-progress-button |
| templateUrl | ./progress-button.component.html |
Properties |
Inputs |
Outputs |
constructor()
|
| ariaLabel | |
Type : string
|
|
Default value : ''
|
|
| class | |
Type : string
|
|
Default value : ''
|
|
| disabled | |
Type : boolean
|
|
Default value : false
|
|
| loading | |
Type : boolean
|
|
Default value : false
|
|
| clikEvent | |
Type : EventEmitter
|
|
| ariaLabel |
Type : string
|
Default value : ''
|
Decorators :
@Input()
|
| class |
Type : string
|
Default value : ''
|
Decorators :
@Input()
|
| clikEvent |
Default value : new EventEmitter<void>()
|
Decorators :
@Output()
|
| disabled |
Type : boolean
|
Default value : false
|
Decorators :
@Input()
|
| loading |
Type : boolean
|
Default value : false
|
Decorators :
@Input()
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'cx-progress-button',
templateUrl: './progress-button.component.html',
})
export class ProgressButtonComponent {
@Input()
ariaLabel: string = '';
@Input()
class: string = '';
@Input()
disabled: boolean = false;
@Input()
loading: boolean = false;
@Output()
clikEvent = new EventEmitter<void>();
constructor() {}
}
<button
(click)="clikEvent.emit()"
[attr.aria-label]="ariaLabel"
[disabled]="disabled || loading"
[ngClass]="class"
class="btn btn-primary"
>
<div class="cx-progress-button-container">
<div *ngIf="loading" class="loader-container">
<div class="loader">{{ 'spinner.loading' | cxTranslate }}</div>
</div>
<ng-content></ng-content>
</div>
</button>