File
Description
A reusable button component that combines an icon with text,
|
buttonType
|
Type : | "mat-button" | "mat-raised-button" | "mat-flat-button" | "mat-stroked-button"
|
Default value : "mat-stroked-button"
|
|
|
|
color
|
Type : "primary" | "accent" | "warn" | undefined
|
Default value : undefined
|
|
|
|
icon
|
Type : string
|
|
Required : true
|
|
|
Methods
|
onClick
|
onClick(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
import {
Component,
input,
output,
ChangeDetectionStrategy,
} from "@angular/core";
import { MatButtonModule } from "@angular/material/button";
import { FaIconComponent } from "@fortawesome/angular-fontawesome";
/**
* A reusable button component that combines an icon with text,
*/
@Component({
selector: "app-icon-button",
templateUrl: "./icon-button.component.html",
styleUrl: "./icon-button.component.scss",
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [MatButtonModule, FaIconComponent],
})
export class IconButtonComponent {
icon = input.required<string>();
buttonType = input<
| "mat-button"
| "mat-raised-button"
| "mat-flat-button"
| "mat-stroked-button"
>("mat-stroked-button");
color = input<"primary" | "accent" | "warn" | undefined>(undefined);
buttonClick = output<Event>();
onClick(event: Event): void {
this.buttonClick.emit(event);
}
}
@switch (buttonType()) {
@case ("mat-button") {
<button
mat-button
type="button"
[color]="color()"
(click)="onClick($event)"
>
<fa-icon [icon]="icon()" class="standard-icon-with-text"></fa-icon>
<ng-content></ng-content>
</button>
}
@case ("mat-raised-button") {
<button
mat-raised-button
type="button"
[color]="color()"
(click)="onClick($event)"
>
<fa-icon [icon]="icon()" class="standard-icon-with-text"></fa-icon>
<ng-content></ng-content>
</button>
}
@case ("mat-flat-button") {
<button
mat-flat-button
type="button"
[color]="color()"
(click)="onClick($event)"
>
<fa-icon [icon]="icon()" class="standard-icon-with-text"></fa-icon>
<ng-content></ng-content>
</button>
}
@default {
<button
mat-stroked-button
type="button"
[color]="color()"
(click)="onClick($event)"
>
<fa-icon [icon]="icon()" class="standard-icon-with-text"></fa-icon>
<ng-content></ng-content>
</button>
}
}
Legend
Html element with directive