[angular.js] @HostBinding()을 이용해, 컴포넌트에 직접 class binding 하기

개요: 컴포넌트 전체에 직접 클래스 바인딩 해서 디자인을 변경하는 상황이 생김

---

angular에선 @HostBinding() 데코레이터를 이용하여, 해당 컴포넌트(host 요소)에 직접 클래스를 바인딩 할 수 있다.

 

사용법

 

1. 아래와 같이 HostBinding 을 이용해 해당 컴포넌트에 class를 변수를 통해 추가하거나 제거할 수 있다.(isExpanded가 true면 expanded 라는 클래스 추가, false면 expanded 클래스 제거)

// 예시
// 아래 코드는, isExpanded 라는 변수가 true가 될때, expanded가 클래스가 추가가 되는 코드. 
@HostBinding('class.expanded')
  get activeClass() {
    return this.isExpanded;
  }

 

2. class가 추가가 되었을 때 사용 할 css 제작

:host { // host는 현재 컴포넌트 자체를 말함 예를들어서, <my-app></my-app> 에게 직접 css를 먹이고 싶을때엔, :host로 가능.
  &.expanded { // expanded라는 class에 css요소 추가
    overflow: hidden;
  }
}

---

위 작업이 어떤게 편의하냐면,

예를들어,

<my-app></my-app>에 디자인을 첨가하고 싶다면 기존 방법은 이렇게 해결을 해왔다.

< class="expanded" my-app></my-app>

<!-- 거기에 조건부 class를 생성하자면 [ngClass]를 이용하기도 하고, 부모요소에서 css를 다뤄야 하기 때문에 보기 번잡 -->

 

 

하지만 @HostBinding() 데코레이터를 이용하면, 해당 컴포넌트에 직접 조건부 클래스를 이용할 수 있다!