What does @HostBinding() do?

AngularJunior~1 min read

The @HostBinding() decorator in Angular lets you bind properties of the host element (the DOM element that a directive or component is applied to) to class fields.

How it works:

Specifies which element property will be bound to the value of a class field (for example, class, style, attr).
The value updates automatically when the class property changes.

Example:

typescript

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

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

html

<p appHighlight>Text with a yellow background</p>

Conclusion: @HostBinding() lets you dynamically control the properties, styles or classes of the host element from the directive or component's code.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.