Що робить @HostBinding()?

AngularJunior~1 хв читання

Декоратор @HostBinding() в Angular дозволяє зв'язувати властивості host-елемента (DOM-елемента, до якого застосована директива чи компонент) із полями класу.

Принцип роботи:

Вказує, яка властивість елемента буде прив'язана до значення поля класу (наприклад, class, style, attr).
Значення автоматично оновлюється при зміні властивості класу.

Приклад:

typescript

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @HostBinding('style.backgroundColor') background = 'yellow';
}

html

<p appHighlight>Текст із жовтим фоном</p>

Висновок: @HostBinding() дозволяє динамічно керувати властивостями, стилями чи класами host-елемента з коду директиви або компонента.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.