Overview

@HostBinding decorator is a powerful tool that allows you to bind to the properties of the host element of a directive or component. In this article, we will explore @HostBinding, understand its significance, and provide comprehensive code examples to illustrate its usage.

What is @HostBinding?

@HostBinding is an Angular decorator that allows you to bind to the properties of the host element of a directive or component. It provides a way to dynamically manipulate the host element's properties, including attributes, styles, and classes. With @HostBinding, you can create dynamic and interactive components and directives that respond to changes in your application's state.

Basic Usage of @HostBinding

To use @HostBinding, you need to import it from @angular/core. Here's a basic example of how it works:

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

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective {
  @HostBinding('style.color') textColor: string = 'red';
  @HostBinding('class.my-class') isClassApplied: boolean = true;
}

In this example, we have created a custom directive called appMyDirective. We have added two @HostBinding decorators to it:

1. The first @HostBinding decorator binds to the style.color property of the host element. It sets the textColor property to 'red', which dynamically changes the text color of the host element.
2. The second @HostBinding decorator binds to the class.my-class property of the host element. It sets the isClassApplied property to true, which dynamically applies the my-class CSS class to the host element.

Using @HostBinding with Custom Directives

The power of @HostBinding becomes more evident when used with custom directives. Let's create a custom attribute directive that dynamically adjusts the background color of an element based on a condition:

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

@Directive({
  selector: '[appConditionalHighlight]'
})
export class ConditionalHighlightDirective {
  @Input() appConditionalHighlight: boolean;

  @HostBinding('style.backgroundColor') get backgroundColor(): string {
    return this.appConditionalHighlight ? 'yellow' : 'transparent';
  }
}