angular material2 change button color when clicked

Question

I want to change a material mat-mini-fab button's color the when button is clicked.

My attempt is like below. But doesn't work.

<button mat-mini-fab color="primary" #btn>Btn</button>

@ViewChild('btn') btn: ElementRef;
clicked() {
    this.btn.nativeElement.style.backgroundColor = '#5789D8';
    this.btn.nativeElement.style.color = '#FFFFFF';
}

thank you mr. Ron to fix my question.

通りすがりのおっさん
– 通りすがりのおっさん

2018-04-17 09:00:41 +00:00
Commented Apr 17, 2018 at 9:00 — 通りすがりのおっさん
– 通りすがりのおっさん, Commented Apr 17, 2018 at 9:00

bugs · Accepted Answer · 2018-04-17 09:05:18Z

5

You can use [ngClass] to dynamically toggle a css class on click

<button [ngClass]="{'test': newColor}" (click)="toggleColor()" mat-fab>Primary</button>

Demo

answered Apr 17, 2018 at 9:05

bugs

15.4k6 gold badges53 silver badges55 bronze badges

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

1 Comment

通りすがりのおっさん Over a year ago

Thank you very much. This is what I wanted to do.

Collectives™ on Stack Overflow

angular material2 change button color when clicked

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related