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

Question

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?

Answer 1

if you want to override (or better extend) the default-button-id from angular material, you have to pass in the id. (https://material.angular.io/components/button-toggle/api#MatButtonToggle)

<div>
  <mat-button-toggle id="test-123" value="right" aria-label="Text align right"></mat-button-toggle>
</div>

the you will get your id inside the component:

<mat-button-toggle ... id="test-123">
  <button class="mat-button-toggle-button" type="button" id="test-123-button" tabindex="0" aria-pressed="false" aria-label="Text align right">
<div class="mat-button-toggle-label-content"></div>
</button>
...
</mat-button-toggle>

Answer 2

Id should be assigned in quotes

<div *ngFor="let button of buttonsFromApi" id="{{button.id}}">
  <mat-button-toggle>{{button.displayName}}</mat-button-toggle>
</div>