Add active class

sabrina_boby

Sabrina Boby

Posted on October 9, 2024

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
πŸ’– πŸ’ͺ πŸ™… 🚩
sabrina_boby
Sabrina Boby

Posted on October 9, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related