how to style a selected mat-button in an angular application

Question

I have an Angular application where the user has multiple choices with buttons and when a button is pressed another component will display. The component depends on the user's choice. One thing I'm trying to implement is the styling of the buttons to make it clear which choice has been selected.

<div  fxLayout="row" fxLayoutAlign="space-between center" fxFill>
<div *ngFor="let button of buttons">
    <button
        mat-stroked-button
        *ngIf="button.type === 'button'"
        (click)="buttonPressed()"
        ngxScrollTo
    >
        {{ button.text }}
    </button>
</div>

<div  fxLayout="row" fxLayoutAlign="space-between center">
    <div *ngIf="item.hasSomeProperty | isTypeButton">
        <button mat-mini-fab (click)="buttonPressed()">
            <mat-icon>close</mat-icon>
        </button>
    </div>
</div>

I have also attached a picture of what im trying to achieve here:

Any help would be much appreciated.

Answer 1

Simply use [ngClass] or [ngStyle] :

<div *ngFor="let button of buttons">
    <button
        mat-stroked-button
        *ngIf="button.type === 'button'"
        [ngClass]="{'disabledButton': !button.selected}"
        (click)="buttonPressed(button)"
        ngxScrollTo
    >
        {{ button.text }}
    </button>
</div>

Assuming that your button model contains the "selected" property (or you have some other model storing information which button was actually clicked):

buttonPressed(button: Button) {
    // Mark only button as selected
    this.buttons.forEach(b => b.selected = b === button);
}

And of course add some class in the css:

.disabledButton {
     opacity: 0.75;
}

Note - writing this from top of my head (since no stackblitz was provided) so some adjustments might be needed.