How to use host bindings to bind properties to the host element in a component

Question

With the help of code tell me How to use host bindings to bind properties to the host element in a component?

Answer 1

In Angular (2+), the @HostBinding() decorator allows you to bind properties or attributes directly to a component or directive's host element using host bindings.

Using @HostBinding() Decorator

Example: Binding a class and style to host

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

@Component({

  selector: 'app-highlight-box',

  template: `<p>Content inside the box</p>`

})

export class HighlightBoxComponent {

  @HostBinding('class.active') isActive = true;

  @HostBinding('style.border') borderStyle = '2px solid blue';

}