[Angular] HostBinding

@angular/core 안에 존재하는 API로 DOM 속성을 호스트 바인딩 속성으로 표시하고 구성 메타데이터를 제공하는 데코레이터이다. Angular는 변경 감지 중에 호스트 속성 바인딩을 자동으로 검사하고 바인딩이 변경되면 디렉티브의 호스트 요소를 업데이트한다.

 

사용

ngModel 디렉티브가 있는 DOM 요소에 valid와 invalid 속성을 설정하는 디렉티브

@Directive({selector: '[ngModel]'})
class NgModelStatus {
  constructor(public control: NgModel) {}
  @HostBinding('class.valid') get valid() { return this.control.valid; }
  @HostBinding('class.invalid') get invalid() { return this.control.invalid; }
}

@Component({
  selector: 'app',
  template: `<input [(ngModel)]="prop">`,
})
class App {
  prop;
}

 

(내가 이해가 안되서 추가하는) 설명

HostBinding을 이용하여 글자를 강조하는 css를 적용해보자.

 

먼저, HighlightedDirective를 생성한다.

import { Directive, HostBinding } from '@angular/core';

@Directive({
  selector: '[highlighted]',
})
export class HighlightedDirective {
//...

  @HostBinding('className')
  get cssClasses() {
    return 'highlighted';
  }
}

 

생성한 디렉티브는 HTML 템플릿에서 highlighted라는 이름으로 사용한다.

<p highlighted>highlighted text</p>

 

이 디렉티브를 사용함으로써 적용하려고 하는 css는 아래와 같다.

.highlighted {
  color: red;
}

 

A. Angular에서 스타일을 적용하는 방법으로는 element에 className을 주는 방법이 있다.

이를 HostBinding으로 사용한다면 아래와 같다.

//...

export class HighlightedDirective {
//...


  @HostBinding('className')  // **
  get cssClasses() { // **
    return 'highlighted'; // **
  }
}

이제 이 디렉티브를 사용하는 DOM Element들은 모두 .highlighted css 설정이 적용된다.

 

B. 특정 class 이름을 줄 수 있다.

highlighted를 무조건 클래스 이름으로 바인딩한다.

//...

export class HighlightedDirective {
//...

  @HostBinding('class.highlighted') // **
  get cssClasses() { // **
    return true; // **
  }
}

 

C. 아 물론 스타일을 직접 주는 것도 가능하다.

//...

export class HighlightedDirective {
//...

  @HostBinding('style.border') // **
  get cssClasses() { // **
    return '1px solid red'; // **
  }
}

 

D. 디렉티브를 사용하는 HTML 템플릿 내에서 프로퍼티를 바인딩함으로써 선택적으로 class 를 적용할 수도 있다. 

유연하니 좋은 방법이다!

//...
export class HighlightedDirective {
  @Input('highlighted')
  isHighligted = false;
  
  constructor() {
  }

  @HostBinding('class.highlighted')
  get cssClasses() {
    return this.isHighligted;
  }
}

이제 이 디렉티브를 사용하기 위해서는 HTML 템플릿에서 프로퍼티를 바인딩 해주어야 한다.

<p [highlighted]="true">highlighted text</p>

이렇게하면 선택적으로 css를 적용할 수 있다.

 

 

알파벳 순서대로 예제를 실행해보려면 여기에서 해보면 된다.

 

 

 

 

 

 

 

 

참고사이트

https://angular.kr/api/core/HostBinding

Angular 가이드

https://angular-university.io/lesson/angular-host-binding

Angular University