HostBinding and HostListener in Angular.Js

Given below are the description for HostListener and HostBinding in the official angular website.

HostListener - It declares a host listener. Decorator that declares a DOM event to listen for and provides a handler method to run when that event occurs.

HostBinding- Decorator that marks a DOM property as a host-binding property and supplies configuration metadata.Angular automatically checks host property bindings during change detection and if a binding changes it updates the host element of the directive. 

The role property declared with @HostBinding to host element<p> is binded in this example it listens to click event declared with @HostListener of the host element<p>.

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

The code in directive.ts file is given below:

@Directive({selector: '[myDir]'})

export class HostDirective {

  @HostBinding('attr.role') role = 'admin'; 

  @HostListener('click') onClick() {




Appcomponent.ts file contains the following code:

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

import {HostDirective} from './directives';


selector: 'my-app',



  <p myDir>Host Element 


  I'm(HostListener) listening to host's <b>click event</b> declared with @HostListener


  I'm(HostBinding) binding <b>role property</b> to host element declared with @HostBinding and checking host's property binding updates, If any property change is found, I will update it.


  <div> Open DOM of host element, click host element(in UI) and check role attribute(in DOM) </div> 


  directives: [HostDirective]


export class AppComponent {}