[Angular] ngClass 로 클래스 추가하기

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다!

 

angular 에서 DOM element 내에 CSS class 를 dynamic 하게 변경하기 위해서 ngClass 를 사용하면 됩니다.

 

<some-element [ngClass]="'first second'">...</some-element>

 

ngClass에는 다음과 같이 3가지 type이 사용 가능합니다.

• String 
• Array 
• Object

<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>

 

하나의 class 뿐만 아니라, 여러개의 class 명을 control 하고 싶을 때는 다음과 같이 사용할 수 있습니다.

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

 

추가적으로 3항 연산자 또한 사용 가능합니다.

<some-element [ngClass]="condition ? 'class1 class2' : 'class1'">...</some-element>

 

 

[References]

Angular