Angular - Make a button active when it is clicked and inactive when an other button in the group is clicked - typescript2.0

Question

I got this code from this post Adding the active class to each clicked button, Angular 4
What I am trying to do is the same thing that is mentioned on that post, make a button active when it is clicked and make the other buttons in the group inactive.
Same code copied, for some reason it doesn't work
<button mat-button *ngFor="let button of filterButtons" [ngClass]="{'active': button.isClicked}" (click)="button.isClicked = !button.isClicked">
{{ button.text }}
</button>
Component.ts
filterButtons = [
{ text: 'Posted', isClicked: false },
{ text: 'FFM', isClicked: false },
{ text: '9999', isClicked: false },
{ text: '9000', isClicked: false },
{ text: '8555', isClicked: false },
{ text: 'Canceled', isClicked: false },
]

Answer 1

The problem is that you are not resetting isClicked value when you click on other buttons.
The simplest solution is something like this.
app.component.html
<button mat-button *ngFor="let button of filterButtons" [ngClass]="{'active': button.isClicked}" (click)="setActive(button)">
{{ button.text }}
</button>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
filterButtons = [
{ text: 'Posted', isClicked: false },
{ text: 'FFM', isClicked: false },
{ text: '9999', isClicked: false },
]
setActive(button: any): void {
for(let but of this.filterButtons) {
but.isClicked = false;
}
button.isClicked = true;
}
}
You can find other solutions, like explained in this post