How to avoid repetitions within Angular ngClass?

Question

Imagine following situation:

 <div *ngFor="let d of dm; first as first">
    <span
      [ngClass]="{ cSmall: !first, cGray: !first, cTab1: !first }"
    >
      {{ d }}
    </span>
  </div>

All these CSS-Classes cSmall, cGray, cTab1 are depended on !first.

Can I avoid unnecessary repetitions within:

{ cSmall: !first, cGray: !first, cTab1: !first }

I've alredy tried { [cSmall,cGray,cTab1]: !first } with no success :)

score 2 · Accepted Answer · answered Oct 30 '19 at 17:20

2

Try

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Reference : NgClass API

answered Oct 30 '19 at 17:20

Akshay Rana

1,455
11
20

Glad to help :) – Akshay Rana Oct 30 '19 at 17:23

score 2 · Answer 2 · answered Oct 30 '19 at 17:20

2

Try this: [ngClass]="{ 'cSmall cGray cTab1': !first }"

answered Oct 30 '19 at 17:20

mgm87

851
1
7
12

How to avoid repetitions within Angular ngClass?

2 Answers2