All cards expanding simultaneously rather than singularly when defining with JSON data - html

Question

Is it possible to expand my cards individually rather than as they are doing now, all together?
I have defined an array of JSON data that will be used to fill the details of the cards, but I just cannot seem to get them to expand individually.
Simple data
export const DATA = [
{
name: 'Some name 1',
},
{
name: 'Some name 2',
}
];
.ts file
export class AppComponent {
data;
expanded = [];
constructor(public toast: MatSnackBar) {
this.data = DATA;
}
}
html
<div class="container">
<mat-card *ngFor="let item of data" #panel [ngClass]="{expanded: expanded[item]}" [class.mat-elevation-z8]="expanded[item]">
<div class="header">
Some content here
<div class="toggle">
<button mat-icon-button>
<mat-icon *ngIf="!expanded[item]" (click)="expanded[panel]=!expanded[item]">
edit
</mat-icon>
<mat-icon *ngIf="expanded[item]" (click)="expanded[item]=!expanded[item]">cancel</mat-icon>
</button>
</div>
</div>
<div class="body" *ngIf="expanded[item]">
Some content here
</div>
</mat-card>
</div>
Here is my stackblitz for you to play with
Edit:
My 'logic' above comes from seeing something similarly implemented like this:
<mat-card #panel *ngFor="let x of [1,2,3]" [ngClass]="{expanded: thisExpands[x]}">
<div class="header">
<div class="toggle">
<button
mat-flat-button
(click)="thisExpands[x]=!thisExpands[x]"
...
However these cards are generated from a much more simple array of data.

Answer 1

you can use index to access the particular item in the forLoop:
<mat-card *ngFor="let item of data; let i = index">
</mat-card>
Your HTML Code:
<div class="container">
<mat-card *ngFor="let item of data; let i = index" #panel [ngClass]="{expanded: expanded[i]}" [class.mat-elevation-z8]="expanded[i]">
<div class="header">
Some content here
<div class="toggle">
<button mat-icon-button>
<mat-icon *ngIf="!expanded[i]" (click)="expanded[i]=!expanded[i]">
edit
</mat-icon>
<mat-icon *ngIf="expanded[i]" (click)="expanded[i]=!expanded[i]">cancel</mat-icon>
</button>
</div>
</div>
<div class="body" *ngIf="expanded[item]">
Some content here
</div>
</mat-card>
</div>
StackBlitz Example

Answer 2

<div class="container">
<mat-card *ngFor="let item of data; let i = index" #panel [ngClass]="{expanded: expanded[i]}" [class.mat-elevation-z8]="expanded[i]">
<div class="header">
Some content here
<div class="toggle">
<button mat-icon-button>
<mat-icon *ngIf="!expanded[i]" (click)="expanded[i]=!expanded[i]">
edit
</mat-icon>
<mat-icon *ngIf="expanded[i]" (click)="expanded[i]=!expanded[i]">cancel</mat-icon>
</button>
</div>
</div>
<div class="body" *ngIf="expanded[i]">
Some content here
</div>
</mat-card>
</div>
Try this one. Use index instead of item.