CODEWITHSUNDEEP
angular
Ajith
Ajith

Reputation: 1

li click add class active and siblings li remove class in angular

please help me this like accordion when i clink li this should add class active then i click next li this should be active and other siblings class will be remove

<div>
    <ul>
      <li class="active-dropdpwn">Dropdpwn 1</li>
      <li>Dropdpwn 2</li>
      <li>Dropdpwn 3</li>
      <li>Dropdpwn 4</li>
      <li>Dropdpwn 5</li>
    </ul>
    </div>

please help me for angular code

Upvotes: 0

Views: 644

Answers (1)

Yannick Beauchamp-H
Yannick Beauchamp-H

Reputation: 1671

You could try something like this:

<div>
  <ul>
    <li [class.active-dropdpwn]="activeIndex === 0" (click)="activeIndex = 0">Dropdpwn 1</li>
    <li [class.active-dropdpwn]="activeIndex === 1" (click)="activeIndex = 1">Dropdpwn 2</li>
    <li [class.active-dropdpwn]="activeIndex === 2" (click)="activeIndex = 2">Dropdpwn 3</li>
    <li [class.active-dropdpwn]="activeIndex === 3" (click)="activeIndex = 3">Dropdpwn 4</li>
    <li [class.active-dropdpwn]="activeIndex === 4" (click)="activeIndex = 4">Dropdpwn 5</li>
  </ul>
</div>

export class AppComponent  {
  activeIndex = 0;
}

Stackblitz

You could simplify this a quite a bit with an *ngFor.

Upvotes: 2

Related Questions