방법 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’"
'FE > Angular' 카테고리의 다른 글
[ ANGULAR ] keyvalue pipe sort properties / iterate in order (0) | 2021.04.18 |
---|---|
[ ANGULAR ] Decimal Pipe (0) | 2021.03.09 |
[ ANGULAR ] ngStyle Dynamic Percent (0) | 2021.03.03 |
[ Angular ] 다음주소 api 사용법 (0) | 2020.12.29 |
[ Angular ] 스크롤 로딩 구현 (0) | 2020.12.29 |