Angular @HostBinding Decorator With Examples

@HostBinding decorator in Angular is used to mark a DOM property of the host element as a binding property. Angular automatically checks host property bindings during change detection, and if a binding changes it updates the host element of the directive. This decorator is quite useful when creating a custom directive as you can bind a property of the host element to a field in your custom directive. By changing the field in the custom directive you can manipulate the host element of the directive.

There is one option that you can pass with the @ HostBinding decorator-

• hostPropertyName- The DOM property that is bound to a data property.

For example

@HostBinding('style.border') border: string;

Binds the style.border properties on the host element to the border property of the Directive class.

@HostBinding Angular example

1. In this example we’ll create a custom directive that changes the background color of the host element when the mouseenter and mouseleave events happen which is done using @HostListener by listening to the events of the host element. It also creates a green border by binding to the style.border property of the host element.

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

@Directive({
  selector: '[appCustomdirective]'
})
export class CustomdirectiveDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) { }
  @HostBinding('style.border') border: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highLight('yellow');
    this.border = '2px dashed green';
  }
  
  @HostListener('mouseleave') onMouseLeave() {
    this.highLight('');
    this.border = '';
  }

  private highLight(color : string){
    this.renderer.setStyle(this.el.nativeElement,'backgroundColor',color);
  }
}

In the custom directive using @HostBinding decorator style.border property of the host element is bound to the border property of the Directive class. Now, if a bound property changes that change is also reflected in the host element of the directive.

Now let’s use this custom directive. Add the following in app.component.html. Here <p> is the host element which is using our custom directive as an attribute.

<p appCustomdirective>Testing HostBinding</p>

2. In this example we’ll bind to the ‘value’ property of the input element and set the value through that binding.

import { Directive, ElementRef, HostBinding, HostListener, Renderer2 } from '@angular/core';
import { NgModel } from '@angular/forms';

@Directive({
  selector: '[appCustomdirective]'
})
export class CustomdirectiveDirective {

  @HostBinding('value') get textValue() { return "Default Value"; }
}

Changes in app.component.html

<label for="username">User:</label>
<input type="text" name="username" appCustomdirective>

That's all for this topic Angular @HostBinding Decorator With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!

---

Related Topics

1. Angular @HostListener Decorator With Examples
2. Angular @Component Decorator With Examples
3. How to Create a Custom Attribute Directive in Angular
4. How to Create a Custom Structural Directive in Angular
5. NgNonBindable Directive in Angular

You may also like-

1. Path Redirection in Angular Routing
2. Async Pipe in Angular With Examples
3. Angular - Call One Service From Another
4. Angular Reactive Form Validation Example
5. Shell Sort Program in Java
6. Difference Between ArrayList And CopyOnWriteArrayList in Java
7. Marker Interface in Java
8. Spring NamedParameterJdbcTemplate Insert, Update And Delete Example