Conditional class values using ngClass - Angular

Question

I want to apply multiple class but there is some difference here compared to other questions of Stackoverflow.

I have to dynamically assign icon class and also 'not-selected'

component.ts

list = [ { name: 'Name1', icon: 'icon_1' }, { name: 'Name2', icon: 'icon_2' } ]

<div *ngFor="let data of list" 
    [ngClass]="{ 'some_icon' : true , 'not-selected': selectedOperation?.name !== operation.name }"> 
    {{data.name}} 
</div>

I can see some_icon but what I need is dynamically assign data.icon too. something like:

<div *ngFor="let data of list" 
    [ngClass]="{ data.icon , 'not-selected': selectedVal?.name !== data.name }"> 
    {{data.name}} 
</div>

but this one is not the correct syntax. What am I missing ?

tmsbrndz · Accepted Answer · 2021-07-01 13:08:12Z

2

You can try with [class] input.

<div *ngFor="let data of list" [class]="data.icon"
    [ngClass]="{'not-selected': selectedVal?.name !== data.name }"> 
    {{data.name}} 
</div>

answered Jul 1, 2021 at 13:08

tmsbrndz

1,3472 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Onur Topal · Accepted Answer · 2021-07-01 13:24:45Z

1

while using [ngClass] you have 3 options, one giving the object that way the keys will be the class name if the value returns true (truthy). the others are regular string and list of arrays but you cannot use a combination of them. For your case, you can use a combination of class and [ngClass] this way you can also use static class names in the HTML as well.

class="{{iconName}} static-class-name" [ngClass]="{'redClass': useRedClass}"

you must define your data similar to the below one.

export class AppComponent {
  title = "CodeSandbox";
  iconName = 'icon1';
  useRedClass = true;
}

edited Jul 1, 2021 at 13:24

answered Jul 1, 2021 at 13:16

Onur Topal

3,0611 gold badge26 silver badges44 bronze badges

Comments

Andreas Turku · Accepted Answer · 2021-07-01 12:47:05Z

0

When the dynamic event happens that will trigger your icons to be changed, assign your list again

private myDynamicChangeHandler = () => {
    this.list = [ { name: 'Name1', icon: this.useIcon1 ? 'icon_1' : 'icon_2' }, { name: 'Name2', icon: this.useIcon1 ? 'icon_1' : 'icon_2' } ]`
};

answered Jul 1, 2021 at 12:47

Andreas Turku

4133 silver badges9 bronze badges

1 Comment

Samuel Over a year ago

I can have n number of icon with a list which has length n

Bertramp · Accepted Answer · 2021-07-01 13:07:30Z

0

I have had success adding dynamic icon classes to the 'normal' class property string with string interpolation and also with pipes. Maybe it works for you too. Remember to add spaces between the class names

<div *ngFor="let data of list" 
    [class]="{{data.icon}} + ' ' +'otherDivClass redIconColorClass'"> 
    {{data.name}} 
</div>

answered Jul 1, 2021 at 13:07

Bertramp

3853 silver badges16 bronze badges

1 Comment

tmsbrndz Over a year ago

probably He cant deal with conditional class here.

Collectives™ on Stack Overflow

Conditional class values using ngClass - Angular

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related