Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Host binding and Host listening

Tags:

angular

How to use the host listener and host binding in angular 2? I tried like the below for host listener, but it's always showing a Declaration expected error.

app.component.ts:

import {Component, EventEmitter, HostListener, Directive} from 'angular2/core';  @Directive({     selector: 'button[counting]' })  class HostSample {     public click = new EventEmitter();     @HostListener('click', ['$event.target']);     onClickBtn(btn){         alert('host listener');     } }  @Component({     selector: 'test',     template: '<button counting></button>',     directives: [HostSample] })  export class AppComponent {    constructor(){    } } 
like image 405
BhaRathi RajaMani Avatar asked Jan 11 '16 10:01

BhaRathi RajaMani


People also ask

What is host listener and host binding in Angular?

@HostBinding and @HostListener are two decorators in Angular that can be really useful in custom directives. @HostBinding lets you set properties on the element or component that hosts the directive, and @HostListener lets you listen for events on the host element or component.

What is event listener and HostListener in Angular?

HostListener - Declares a host listener. Angular will invoke the decorated method when the host element emits the specified event. @HostListener - will listen to the event emitted by the host element that's declared with @HostListener . HostBinding - Declares a host property binding.

What is the use of HostListener?

HostListenerlink Decorator that declares a DOM event to listen for, and provides a handler method to run when that event occurs.

What is the host binding decorator doing in this directive?

In Angular, the @HostBinding() function decorator allows you to set the properties of the host element from the directive class. Let's say you want to change the style properties such as height, width, color, margin, border, etc., or any other internal properties of the host element in the directive class.


2 Answers

@HostListener is a decorator for the callback/event handler method, so remove the ; at the end of this line:

@HostListener('click', ['$event.target']); 

Here's a working plunker that I generated by copying the code from the API docs, but I put the onClick() method on the same line for clarity:

import {Component, HostListener, Directive} from 'angular2/core';  @Directive({selector: 'button[counting]'}) class CountClicks {   numberOfClicks = 0;   @HostListener('click', ['$event.target']) onClick(btn) {     console.log("button", btn, "number of clicks:", this.numberOfClicks++);   } } @Component({   selector: 'my-app',   template: `<button counting>Increment</button>`,   directives: [CountClicks] }) export class AppComponent {   constructor() { console.clear(); } } 

Host binding can also be used to listen to global events:

To listen to global events, a target must be added to the event name. The target can be window, document or body (reference)

@HostListener('document:keyup', ['$event']) handleKeyboardEvent(kbdEvent: KeyboardEvent) { ... } 
like image 110
Mark Rajcok Avatar answered Oct 05 '22 23:10

Mark Rajcok


This is the simple example to use both of them:

import {   Directive, HostListener, HostBinding } from '@angular/core';  @Directive({   selector: '[Highlight]' }) export class HighlightDirective {   @HostListener('mouseenter') mouseover() {     this.backgroundColor = 'green';   };    @HostListener('mouseleave') mouseleave() {     this.backgroundColor = 'white';   }    @HostBinding('style.backgroundColor') get setColor() {      return this.backgroundColor;   };    private backgroundColor = 'white';   constructor() {}  } 

Introduction:

  1. HostListener can bind an event to the element.

  2. HostBinding can bind a style to the element.

  3. this is directive, so we can use it for

    Some Text
  4. So according to the debug, we can find that this div has been binded style = "background-color:white"

    Some Text
  5. we also can find that EventListener of this div has two event: mouseenter and mouseleave. So when we move the mouse into the div, the colour will become green, mouse leave, the colour will become white.

like image 44
Xin Meng Avatar answered Oct 05 '22 23:10

Xin Meng