give active class onclick in ngFor angular 2

Question

Hi I have unordered list and all of them have active class. I want to toggle active class when clicked to any list item. My code is like this

<ul class="sub_modules">
  <li *ngFor="let subModule of subModules" class="active">
    <a>{{ subModule.name }}</a>
  </li>
</ul>

can anyone help me to do this?

Tamekia

Answer 1

You can do something like:

<ul class="sub_modules">
  <li (click)="activateClass(subModule)"
      *ngFor="let subModule of subModules"
      [ngClass]="{'active': subModule.active}">
    <a>{{ subModule.name }}</a>
  </li>
</ul>

On The component

activateClass(subModule){
  subModule.active = !subModule.active;    
}

On the Ng class the first property is the class you wanna add and the second is the condition;

Credulous

Thank You @Eduardo .. This is what I want but all list items should have already active class.. so how can I do that? – Tamekia

you can do an map to the array. array.map(obj = > { obj.active=false; return obj; }) – Credulous

Thank you so much. I did it with obj.active=true... This is what I want) it works perfectly) – Tamekia

Answer 2

just make an index property. use let i = index to set the index using (click) event. Then check if selectedIndex === i if yes the set class "active" to true

<ul class="sub_modules">
  <li *ngFor="let subModule of subModules; let i = index" 
      [class.active]="selectedIndex === i" 
      (click)="setIndex(i)">
    <a>{{ subModule.name }}</a>
  </li>
</ul>

Then on typescript file: just set selectedIndex.

export class ClassName {
   selectedIndex: number = null;

   setIndex(index: number) {
      selectedIndex = index;
   }
}

Ambrosio

You have an error in you HTML block. [class.active]='sIndex === i instead of [class.active]='selectedIndex === i. Otherwise, good answer :-) – Fourhanded

It's not toggling – Booster

Was looking for a simple solution and found this... thanks. I always like to use Angular's shorthand template methods before reverting to component logic. – Griffis

Answer 3

I believe you can find your answer here: AngularJs - Best-Practices on adding an active class on click (ng-repeat)

You can target and apply CSS to an item/object through Angular's $index. The post explains and demonstrates the logic better than I can.

Modernistic

Sorry but your answer is not what I want. – Tamekia

Answer 4

I'd like to add & clarify a possible misconception:

• You can only add classes via via [ngClass].
• You can NOT add selectors like the :active selector.

<li [ngClass]="{'active': isActive === true}">

Mind the difference:

.li.active {
  // This works! :)
}

.li:active {
  // This doesn't work! :(
}

It might be obvious for some, but took me ~15 minutes of trial & error to understand.

Curtin

Answer 5

the loop
<div *ngFor="let item of divs; let i = index">
    <app-cool [index]="i"></app-cool>
</div>

the <app-cool></app-cool> html  
<div (click)="setActive()"  [class.active]="isActive()">

</div> 

the <app-cool></app-cool> ts
static activeIndex = -1;

@Input() index: number = -1;
    
public setActive(): void{
    ThisClass.activeIndex = this.index;
}

public isActive(): boolean{
    return ThisClass.activeIndex === this.index;
}

Otisotitis