javascript - How to collapse only selected row ? Angular

Question

I want to toggle only the selected row, but I can't do that?

Check my code all and demonstration is here: https://stackblitz.com/edit/test-trainin-2-gv9glh?file=src%2Fapp%2Fapp.component.scss

I'm currently toggle all the row and I only want the row where it was clicked.

Here 90 line of code. Here is start:

  <div class="column-holder" *ngFor="let training of trainingExercises; let i = index;">
   
    <div class="single-exe" [class]="{ 'collapse-row' : collapse}">
      <h1 class="exerciseNameAbsolute"> {{ training.exerciseName }}</h1>
      <i (click)="collapse = !collapse" class="dx-icon-collapse dx-icon-custom-style"></i>

question from:https://stackoverflow.com/questions/65837242/how-to-collapse-only-selected-row-angular

Answer 1

<div class="column-holder" *ngFor="let training of trainingExercises; let i = index;">
   
    <div class="single-exe" [class]="{ 'collapse-row' : training.collapse}">
      <h1 class="exerciseNameAbsolute"> {{ training.exerciseName }}</h1>
      <i (click)="training.collapse = !training.collapse" class="dx-icon-collapse dx-icon-custom-style"></i>

This is the suggestion I made from the comment. Add a collapse property to each of your training variables and default it to true/false depending upon what state you want them to start out in. Change your [class] to look at that scoped variable, and when you click the element that toggles the collapse, toggle that variable on the training variable.