Angular에서 css 및 style 다루기

ngClass

공식 문서

[ngClass]="k.currency | lowercase"

<some-element [ngClass]="'first, second'">...</some-element> // 바로 변수 대입
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
<some-element [ngClass]="{'selected': selectedWord == word.enc, 'duplicated':  word.duplicated, 'notfill': !word.fillable}"></some-element>

아래 처럼 사용할 경우 info.flipped가 true일 경우 클래스에 'on' 이 추가되다.
[class.on] 대신에 [class.원하는 클라스]를 사용하여 다양한 클래스가 사용가능하다.

<some-element [class.on]="info.flipped">...</some-element>		

ngStyle

공식 문서

controller에서 정의 하여 사용가거나

// controller
raffleStyle: any = {'transition': 'none 0s ease 0x', 'transform': 'rotate(50deg)'};

// html
<some-element [ngStyle]="raffleStyle"></some-element>

바로 html에서 사용해도 된다.

<some-element [ngStyle]="{backgroundColor: waterDisplay[i][0]}"></some-element>

<some-element [ngStyle]="{top: position[1] + 'px',  left: 'calc(50vw + ' + position[0] + 'px',  transform: 'rotate(0deg)'}"></some-element>