Angular에서 클래스 바인딩은 HTML 요소에 동적으로 클래스를 추가하거나 삭제하기 위해 사용됩니다. 이것은 조건에 따라 UI를 변경할 때 특히 유용합니다.

HTML 클래스 속성 내에서 클래스 바인딩

HTML 요소의 클래스 속성에 Angular 표현식을 사용하여 클래스를 바인딩할 수 있습니다. 예를 들어, 다음과 같이 ngClass 디렉티브를 사용하여 클래스를 바인딩할 수 있습니다.

<div [ngClass]="{ 'active': isActive, 'inactive': !isActive }">...</div>

위의 예제에서, isActive 변수의 값에 따라 active 또는 inactive 클래스가 추가 또는 삭제됩니다.

NgClass 디렉티브의 사용자 정의

또한, ngClass 디렉티브 내에서 사용자 정의 함수를 사용하여 동적으로 클래스를 적용할 수도 있습니다.

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

그리고 component 클래스에서 getClass 함수를 다음과 같이 정의할 수 있습니다.

getClass() {
  return {
    'active': this.isActive,
    'inactive': !this.isActive
  };
}

NgClass 디렉티브를 사용한 CSS 클래스 바인딩

또한, CSS 클래스 바인딩을 사용하여 클래스를 동적으로 적용할 수도 있습니다.

.active {
  color: green;
}

.inactive {
  color: red;
}

위와 같이 ngClass를 사용하여 동적으로 클래스를 적용함으로써 UI를 쉽게 변화시킬 수 있습니다.

이것은 Angular에서 클래스 바인딩을 사용하는 간단한 예제이며, 동적으로 UI를 변경하고 사용자 경험을 향상시키는 데 매우 유용합니다.

더 많은 내용은 Angular 공식 문서를 확인해 주세요.

참고: Angular 공식 문서

이상입니다. 감사합니다!