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