ngClass

참조

[ngClass]="k.currency | lowercase"
<some-element [ngClass]="'first, second'">...</some-element> // 바로 변수 대입
<some-element [ngClass]="['first', 'second']">...</some-element>

예

조건에 따라 다수의 클래스가 필요할때 사용한다.

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<span class="gender" [ngClass]="{'m': user.gender==='M', 'w': user.gender==='W'}"> // 사용자 gender에따라 다른 클래스를 사용한다.

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

예

[class.클래스명] 을 사용할 경우 결과값(true, false)에 따라 클래스명이 나오거나 사라진다.

<some-element [class.클래스명]="True | False">...</some-element>
<some-element [class.on]="True | False">...</some-element>