projects/commons/src/lib/elements/buttons/components/button.component.ts
| selector | cmn-button |
| styleUrls | ./button.component.scss |
| templateUrl | ./button.component.html |
Properties |
|
Methods |
|
Inputs |
| badge | |
Type : IBadge
|
|
| class | |
Type : string
|
|
| isDisabled | |
Type : boolean
|
|
| isLoading | |
Type : boolean
|
|
| label | |
Type : string
|
|
| leftIcon | |
Type : string
|
|
| rightIcon | |
Type : string
|
|
| size | |
Type : Sizes
|
|
| type | |
Type : string
|
|
Default value : 'button'
|
|
| Public ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Public sizeIcon |
Type : string
|
import { Component, Input, OnInit } from '@angular/core';
import { Sizes } from '../../../shared/enums';
import { IBadge } from '../../badge/interfaces';
@Component({
selector: 'cmn-button',
templateUrl: './button.component.html',
styleUrls: [ './button.component.scss' ],
})
export class ButtonComponent implements OnInit {
@Input() public readonly size: Sizes;
@Input() public readonly badge: IBadge;
@Input() public readonly label: string;
@Input() public readonly leftIcon: string;
@Input() public readonly rightIcon: string;
@Input() public readonly isLoading: boolean;
@Input() public readonly isDisabled: boolean;
@Input('class') public readonly clazz: string;
@Input() public readonly type: string = 'button';
public sizeIcon: string;
public ngOnInit(): void {}
}
<button [type]="type"
[cmnBadge]="badge?.label"
[color]="badge?.color"
class="button {{ clazz }} {{ size }}"
[class.is-loading]="isLoading"
[disabled]="isDisabled || isLoading">
<span class="icon {{ sizeIcon }}"
*ngIf="leftIcon">
<i class="{{ leftIcon }}"></i>
</span>
<span>
{{ label }}
</span>
<span class="icon {{ sizeIcon }}"
*ngIf="rightIcon">
<i class="{{ rightIcon }}"></i>
</span>
</button>
./button.component.scss