Angular - [ class 바인딩 ]

[ class.CSS클래스명 ] = boolean값;
CSS 스타일을 적용할지 여부를 결정할 수 있다.
true인 경우에 cSS 스타일이 적용된다.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root', // 이 컴포넌트를 쓰기위한 명칭 app-root -> index.html 에서 사용
  templateUrl: './app.component.html', // 화면 구성
  styleUrls: ['./app.component.css'], // 스타일 지정
})
export class AppComponent {
  title = 'CSS의 class 바인딩 실습';
  result = true; // style sheet 적용
}

app.component.html

<h1>{{ title }}</h1>
<ul>
  <li>css적용됨</li>
</ul>
<p [class.font-red]="true">홍길동</p> <!--[class.클래스명]=boolean-->
<p [class.font-blue]="true">이순신</p>
<p [class.font-red]="result">유관순</p><!--속성값 바인딩 사용-->

app.component.css

ul {
  list-style: none;
}
.font-red {
  color: red;
}
.font-blue {
  color: blue;
}

실행화면