Expanding multiple divs independently based on Boolean variable value

Question

I have a list of mat-card components that are individually expanded on clicking a button within each card. So far the Boolean variable has been defined within the HTML code itself rather than in the Angular .ts file, however I am wanting to transition this to use a Boolean in the .ts file.

I have attempted to assign a simple Boolean, however I now find that all of the cards expand at the same time...

I know what is wrong, but I cannot think about the way in which to fix it :-/

Here is a stackblitz

Answer 1

Since your cards are created with an ngFor directive from an array, the expanded data should be stored in an array too!

.ts

thisExpands = [];

.html

[ngClass]="{expanded: thisExpands[x]}"

(click)="thisExpands[x] = !thisExpands[x]"

Demo