Angular *ngFor "id" tag generation incorrect with `mat-button-toggle`

I'm trying to generate a list of buttons from an array:

<div class="card-container">
<mat-button-toggle *ngFor="let button of buttonsFromApi" id={{button.id}} class="problemButton" [disabled]="sso.invalid" >{{button.id}}</mat-button-toggle>
</div>


buttonsFromApi contains 5 objects like:

{
displayName: "Button name",
id: "100",
}


So basically I want the button to display the displayName (this works) and to have the id that is in the object. The latter of this does not happen, but instead, the button(s) have id(s) like 100-button and 200-button instead of 100 and 200. Why is this and how can I make it so the ids are 100 and 200 instead of 100-button and 200-button?

Continue reading...