Angular에서 CSS 클래스 바인딩

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

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

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

app/app.component.css.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

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

예제

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

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

예제

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

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = true;
  public isBold: boolean = false;
}

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

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

실습 과제

app/app.component.css.hidden {
  visibility: hidden;
}