Angular에서 CSS 스타일 바인딩

Angular에서는 요소에 직접 스타일을 추가할 수도 있습니다. 이는 다음과 같은 형식으로 작성된 태그의 속성을 사용하여 수행됩니다:

[style.styleProperty]="property value"

이때 하이픈을 포함하는 CSS 속성 이름은 카멜 케이스(camelCase)로 작성됩니다. 예제를 통해 이것이 어떻게 작동하는지 살펴보겠습니다.

예제

요소에 배경색을 설정해 봅시다:

<div [style.backgroundColor]="'blue'">
	text
</div>

배경색을 포함하는 속성이 있다고 가정해 봅시다:

export class AppComponent {
	public value: string = 'red';
}

이 속성을 스타일 값으로 적용해 보겠습니다:

<div [style.backgroundColor]="value">
	text
</div>

부울(boolean) 속성이 있다고 가정해 봅시다:

export class AppComponent {
	public isActive: boolean = true;
}

부울 속성의 내용에 따라 CSS 속성에 다양한 값을 바인딩하겠습니다. 이를 위해 삼항 연산자를 사용합니다:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	text
</div>

블록이 주어져 있습니다. 블록을 첫 번째 클릭시 빨간색으로, 두 번째 클릭시 초록색으로 칠해지도록 만드세요.

블록과 버튼이 주어져 있습니다. 버튼을 누르면 블록의 너비가 두 배로 늘어나도록 만드세요.