[Angular/Ionic] 클래스 바인딩

클래스를 바인딩 할 때는 [ngClass]를 사용한다.

page1.ts 에 다음과 같이 변수가 선언되어있다고 하자.

let type1 = 'p';

 

page1.html 에서는 보통

[ngClass]=" type1=='p' ? 'prev' : ' ' "

 

또는

 

[ngClass]="{'prev' : type1=='p' }"

이런 방법으로 사용했는데, 아래와 같이 여러가지 변수에 대응하게 하는 것도 가능하다.

두 번째 예시와 방법은 동일하다.

변수가 

let type2='f';

 

이렇게 하나가 더 추가되었을 때,

 

[ngClass]=" { 'prev' : type1=='p', 'first' : type2== 'f'} "

 

이렇게 사용하여 각자 다른 변수에 대해 다른 클래스가 바인딩 되도록 할 수 있다.

물론 동일한 변수의 여러 케이스 역시 가능하다.

 

[ngClass]=" { 'prev' : type1=='p', 'next' : type1== 'n'} "