Host binding and Host listening

Question

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(){
   }
}

tobias47n9e · Accepted Answer · 2020-09-01 10:32:06Z

85

@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) { ... }

edited Sep 1, 2020 at 10:32

tobias47n9e

2,2513 gold badges30 silver badges57 bronze badges

answered Jan 12, 2016 at 3:04

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

BhaRathi RajaMani Over a year ago

Thank you Mark. Now I found my mistake. I used semicolon at the end in this line -> @HostListener('click', ['$event.target']); this produced declaration expected error.

ps2goat Over a year ago

I'm doing this with a 'blur' event, and it works in Chrome but not IE 11. I'm using angular2 beta.8 right now. Error from angular polyfills: EXCEPTION: Error during evaluation of "blur" ORIGINAL EXCEPTION: TypeError: Object doesn't support this action. I can open a new question if you haven't seen this before, but I'll likely have to upgrade to the rc soon.

stackdave Over a year ago

the example in plunker is nice; and i understand the decorator HostListener. It's possible omit this decorator just to do a button counter? i mean in the component just with a (click) = function() ... , I mean is not more clear than this case just do it with that decorator?

Sam Over a year ago

Can you update the link to reference? That page is no longer there.

Mark Rajcok Over a year ago

@SagarDesai, they've changed the API docs around so much lately... and it doesn't look like that comment is shown in the API docs anymore. Here's a direct link to the code comment though: github.com/angular/angular/blob/…

|

tobias47n9e · Accepted Answer · 2020-09-01 10:33:23Z

17

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:

HostListener can bind an event to the element.
HostBinding can bind a style to the element.
this is directive, so we can use it for
Some Text
So according to the debug, we can find that this div has been binded style = "background-color:white"
Some Text
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.

edited Sep 1, 2020 at 10:33

tobias47n9e

2,2513 gold badges30 silver badges57 bronze badges

answered Feb 1, 2017 at 0:13

Xin Meng

2,1603 gold badges21 silver badges32 bronze badges

1 Comment

canbax Over a year ago

can we unbind host listener?

Collectives™ on Stack Overflow

Host binding and Host listening

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest