[Angular] ngClass, ngStyle의 여러가지 사용 방법

 

Boolean Variable값에 따라 class 적용하기

<div [ngClass]="{'enabled': item.checked, 'disabled': !item.checked}"></div> <div [class.grey]="!item.checked"></div>

 

multiple class

<div [ngClass]="{'disabled grey': !item.checked}"></div> <div [ngClass]="[disabled, grey]"></div>

 

조건부 삼항 연산자

<div [ngClass]="item.checked ? 'enabled' : 'disabled'"></div>

 

method에서 받아오기

<div [ngClass]="checkStatus()"></div>

 

style 사용하기

<div [ngStyle]="{color: item.color, width.%:item.width}"></div>

<div [style.color]="item.color"></div> <div [style.width.px]="item.width"></div>