How to enable div on click only to the mat-card dynamically rendering-CodePudding

I am working on cards , where I need to show the div containing image only to the card I am clicking. The cards I am rendering dynamically. How can I do that ?

<div [fxFlex]="(50/gridColumns)   '%'" fxFlex.xs="50%" fxFlex.sm="33%" *ngFor="let language of languages">
       <mat-card  style="height: 60px;  border-radius: 8px;">
              <div #i style="float: right; margin-bottom: 1px">  ////== > show this div img on particular clicked card only
                    <img src ="../../assets/Images/Check.svg">
              </div>
              <mat-card-content style="text-align: center; margin-top: 23px;">
                  <span style="color: blue; font-weight: 800;
                        letter-spacing: 0.2px;">
                            {{language.content}}
                   </span>
              </mat-card-content>
        </mat-card>
 </div>

CodePudding user response：

You'll need to manage a state in your component.ts file and update it on click. The index of the list can be saved as the state. When the user clicks on the card, update the active card index.

@Component({})
export class YourComponent{
  currentActive = -1;

  setActiveCard(index: number){
    this.currentActive = index;
  }
}

<div *ngFor="let language of languages;index as i">
   <mat-card (click)="setActiveCard(i)">
      <div *ngIf="currentActive === i">
        <img src ="../../assets/Images/Check.svg">
      </div>
      <mat-card-content>
        <span> {{language.content}}</span>
      </mat-card-content>
   </mat-card>
 </div>