DEV Community

Sabrina Boby
Sabrina Boby

Posted on

Add active class

html=>
@for (i of [1,2]; let j = $index; track j) {
    <div class="card" (click)="setActiveCard(j)" [ngClass]="{ active: activeCardIndex === j }">
      <div class="mark">
        <mat-icon class="premark">radio_button_unchecked</mat-icon>
        <mat-icon class="postmark">check_circle</mat-icon> 
      </div>
   }

ts=>
activeCardIndex: number;
  setActiveCard(index: number) {
    this.activeCardIndex = index;
  }



If the card is clicked again, deactivate it==>
html=>
@for (i of [1,2]; let j = $index; track j) {
    <div class="card" (click)="setActiveCard(j)" [ngClass]="{ active: activeCardIndex === j }">
      <div class="mark">
        <mat-icon class="premark">radio_button_unchecked</mat-icon>
        <mat-icon class="postmark">check_circle</mat-icon> 
      </div>
   }

ts=>
activeCardIndex: number | null = null;
  setActiveCard(index: number): void {
    // If the card is clicked again, deactivate it
    this.activeCardIndex = this.activeCardIndex === index ? null : index;
  }

Enter fullscreen mode Exit fullscreen mode

Top comments (0)