Angular에서 CSS 클래스 바인딩

Angular에서는 블록에 CSS 클래스를 적용하거나 적용하지 않도록 설정할 수 있습니다. 이는 다음 형식으로 작성된 태그의 속성을 사용하여 수행됩니다:

[class.클래스_이름]="true 또는 false"

실제로 살펴보겠습니다. 다음과 같은 클래스가 있다고 가정해 보겠습니다:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

이 클래스들을 블록에 어떻게 적용하고 비활성화하는지 예제를 통해 살펴보겠습니다.

예제

하나의 클래스를 활성화하고 다른 클래스를 비활성화해 보겠습니다:

<div [class.blue]="true" [class.bold]="false">
	텍스트
</div>

클래스의 상태가 클래스의 속성에 저장되어 있다고 가정해 보겠습니다:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

우리 속성의 값에 따라 클래스의 가시성을 바인딩하겠습니다:

<div [class.blue]="isBlue" [class.bold]="isBold">
	텍스트
</div>

다음 CSS 클래스가 주어졌습니다:

.hidden {
	visibility: hidden;
}

이 클래스를 블록에 바인딩하세요. 버튼을 만들어 클릭하면 블록이 숨겨지거나 표시되도록 하세요.