[Angular] ngClass 동적으로 class 변경하기

ngClass는 ngStyle과 동작방식이 비슷하다. 

style과 다르게 class 명을 동적으로 바꿔 준다고 생각하면 된다.

 

 

test.component.css

.blue {
  color: blue;
  font-size: 20px;
}

.red {
  color: red;
  font-size: 30px;
}

미리 설정한 css 클래스이다

 

 

 

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  val = true;
  constructor() {

  }

  ngOnInit() {
  }

  changeView() {
    this.val = !this.val;
  }

  getClass() {
    return this.val ? { blue: true } : { red: true };
  }
}

<button (click)="changeView()">btn</button>

<div [ngClass]="getClass()">hello</div>

 

 

버튼을 클릭하면 val 값이 계속해서 변하고 val 값에 따라 클래스 명이 blue, red가 계속 뒤바뀐다.