【Angular】 값에 따라 CSS 전환

2462 단어 Angular
쓰는 방법은 두 가지.

①ngClass 사용
② 클래스 바인딩 사용
<!-- ngClass -->
<p [ngClass]="{ 'font-on': fontFlag }">ngClass</p>
<!-- クラスバインディング -->
<p [class.font-on]="fontFlag">css works!</p>

<button (click)="changeClass()">色を変える</button>
p {
  color: black;
}
.font-on {
  color: red;
}
export class CssComponent implements OnInit {
  fontFlag = false;
  constructor() {}

  ngOnInit() {}

  changeClass() {
    this.fontFlag = !this.fontFlag;
  }
}


버튼을 누르면 색이 바뀝니다


단순히 2종류를 바꾸고 싶은 것만이라면 클래스 바인딩,
여러 종류를 구분하고 싶을 때는 ngClass가 편리해

좋은 웹페이지 즐겨찾기