Add active class
Sabrina Boby
Posted on October 9, 2024
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;
}
π πͺ π
π©
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
privacy Caught in the Crunch My Journey from Snacks to 2 Million Exposed Users Privacy
November 30, 2024