How to add dynamic classes to looped elements in angular

Question

I have a looped list. I have to add class active when any block is clicked. I am not sure how to do it using [ngClass]. Please help me.

It is HTML code:

<div *ngFor="let cell of myData">
    <div class="list-header">
        <label>{{ cell.name }}</label>
    </div>
    <div class="list-group">
        <a class="list-group-item list-group-item-action d-flex" *ngFor="let unit of cell.array" (click)= "onClick()" [ngClass]="{'active': this.active}">
            <label>{{ unit }}</label>
        </a>
    </div>
</div>

my TS code:

myData = [
{
  'name': 'abc',
  'array': ["asass","From Mac","New", "test 1", "test 10", "test 2", "test 3", "test 4", "test 5", "test 6", "test 7", "test 8", "test 9" ]
},
{
  'name': 'all types and options',
  'array': ['Camera','del TYPE','Fan','hardware','icons','mobile','new asset type']
},
{
  'name': 'am cat',
  'array': ['am type','camera','new 423423']
},
{
  'name': 'cat with no asset types, dec added',
  'array': ['camera']
},
{
  'name': 'cat with one asset type',
  'array': ['camera']
},
{
  'name': 'colors',
  'array': ['pink', 'yellow']
}
];

score 0 · Answer 1 · answered Feb 07 '19 at 06:49

0

<div class="my_class" (click)="clickEvent()"  
    [ngClass]="active ? 'success' : 'danger'">                
     Some content
</div>

active: boolean = false;
clickEvent(){
    this.active = !this.active;       
}

answered Feb 07 '19 at 06:49

Harsh Manvar

27,020
6
48
102

It is not working as it will add active class to every element.. I want to add active class to those elements which are clicked. – Gopal Sahu GS Feb 07 '19 at 06:58
you have to modify it as per your need – Harsh Manvar Feb 07 '19 at 06:59
1

I have modified it for my need. But when the active turns to true, it is effecting every element in loop. Can we make it for a single element like using index? – Gopal Sahu GS Feb 07 '19 at 07:02
check this out : https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass – Harsh Manvar Feb 07 '19 at 07:04
1

yeah bro, it is doing great.. Thank you. – Gopal Sahu GS Feb 07 '19 at 09:01
@GopalSahuGS requesting you to share your answer here and mark it as answer. that's how it's work – Harsh Manvar Feb 07 '19 at 09:02

score 0 · Accepted Answer · answered Feb 07 '19 at 10:14

template:

<div *ngFor="let cell of myData">
      <div class="list-header">
        <label>{{ cell.name }}</label>
      </div>
      <div class="list-group">
        <a class="list-group-item list-group-item-action d-flex" *ngFor="let unit of cell.array; let i = index" (click)= "cell.selectedIndex=i" [ngClass]= "{ 'active': cell.selectedIndex === i }" >
          <label>{{ unit }}</label>
        </a>
      </div>
    </div>

How to add dynamic classes to looped elements in angular

2 Answers2

Linked