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(){
}
}
@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) { ... }
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 TextSo according to the debug, we can find that this div has been binded style = "background-color:white"
Some Textwe 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.