FE/Angular

[ ANGULAR ] ngClass 종류별 표현식

HEON.D 2021. 1. 19. 15:02

방법 1 - 조건 방식

복수의 상황이 발생할 때 선언하기 좋음

[ngClass]="{‘my-class’: step==‘step1’}"

 

방법 2 - Switch 방식

하나의 변수가 케이스가 분리될 경우 좋음

[ngClass]="{1:‘my-class1’,2:‘my-class2’,3:‘my-class4’}[step]"

 

방법 3 - Optional 방식

조건이 Yes / No 로 확연히 구분되는 경우 좋음

[ngClass]="(step==‘step1’)?‘my-class1’:‘my-class2’"

 

방법 4 - Directive 선언 방식

조금 클래식한 방식, 비추천

[class.my-class]="step==‘step1’"