Creating layout with card toggle button dynamically

Question

I am tring this layout where I generate mat-card and toggle button in angular for every data it has it display properly but the toggle button does not work as intended. I do not have error to follow and this my first project in angular.

I placed the code in here https://stackblitz.com/edit/angular-kpzast-jmn8uh?file=src/app/card-overview-example.ts

Typescript

export class CardOverviewExample {

  readonly chunkSize: number = 1;

  data = ['data1', 'data2', 'data3', 'data4'];

  getChunkedData() {
    var chunkedData = [];
    for (let i = 0; i < this.data.length; i += this.chunkSize) {
      chunkedData.push(this.data.slice(i, i + this.chunkSize));
    }
    return chunkedData;
  }
}

HTML

<mat-card *ngFor="let data of getChunkedData()">
  <p *ngFor="let item of data">
  {{item}}
  </p>
  <mat-button-toggle-group #group="matButtonToggleGroup">
  <mat-button-toggle value="left" aria-label="Text align left">
    <mat-icon>format_align_left</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="center" aria-label="Text align center">
    <mat-icon>format_align_center</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="right" aria-label="Text align right">
    <mat-icon>format_align_right</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="justify" disabled aria-label="Text align justify">
    <mat-icon>format_align_justify</mat-icon>
  </mat-button-toggle>
</mat-button-toggle-group>
<div class="example-selected-value">Selected value: {{group.value}}</div>
</mat-card>

David David · Accepted Answer · 2020-08-19T21:14:40

The problem is, you have only one #group for all the toggle groups. You shoul mark them like #group1 #group2 etc. Rather find another way to multiply mat-toggle-group or use (change) event on it.

Creating layout with card toggle button dynamically

1 Answers