Angular - Change button style on click of dynamic list of buttons

Question

I want to make dynamic list of buttons when ever click on 1 button, it's style should be change, I'm not getting idea to how to make this work for example:

when ever we click on one of the these button only that button style changes. any idea how to make this work? plus here is a link who is using similar work still not getting idea.

Can you create a Stackblitz example? You can use ngClass to add classes dynamically. — Rajat
– Rajat, Commented Apr 13, 2021 at 5:44
I believe the button toggle component is what you're looking for. (Additionally, is your question asking about AngularJS or Angular? The two frameworks aren't exactly the same..) — Edric
– Edric, Commented Apr 13, 2021 at 5:51
@Edric no I don't to do with toggle component, I believe Zunayed resolved my issue. and Sorry it was just angular question. — Khizar Murad
– Khizar Murad, Commented Apr 13, 2021 at 21:50

Zunayed Shahriar · Accepted Answer · 2021-04-13 05:48:04Z

2

If you want fully dynamic then create an array of button names.

buttons = ['Button 1', 'Button 2', 'Button 3'];

And a variable for the selected button and assign the first button as selected.

selectedButton: string = this.buttons[0];

Create a function to check the selected button.

isButtonSelected(button: string) {
    return button === this.selectedButton;
}

Add switchButton function to toggle your selection.

switchButton(button: string) {
   this.selectedButton = button;
}

Iterate your buttons at HTML:

<ng-container *ngFor="let button of buttons">
    <button mat-button [ngClass]="{'mat-raised-button':isButtonSelected(button)}" (click)="switchButton(button)">{{button}}</button>
</ng-container>

You can now change mat-raised-button to any other button type as your wish.

See detail in working demo at StackBlitz.

answered Apr 13, 2021 at 5:48

Zunayed Shahriar

2,7632 gold badges14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - Change button style on click of dynamic list of buttons

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related