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() {
   this.role=this.role=='admin'?'guest':'admin';
  }

}

Appcomponent.ts file contains the following code:

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

@Component({
selector: 'my-app',
template:
  `
  <p myDir>Host Element 
  <br><br>
  I'm(HostListener) listening to host's <b>click event</b> declared with @HostListener

  <br><br>
  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.
  </p>

  <div> Open DOM of host element, click host element(in UI) and check role attribute(in DOM) </div> 
    `,
  directives: [HostDirective]
})
export class AppComponent {}