import {Directive, ElementRef, Output, EventEmitter, Renderer} from 'angular2/core';
@Directive({
selector: 'my-comp'
})
export class myComp {
constructor(el: ElementRef, renderer: Renderer) {
renderer.listen(el.nativeElement, 'change', event => console.log(event));
}
}
- directive decorator
- ElementRef.nativeElement
- Renderer.listen()
Directive decorator
For my case here, I use directive decorator, because I do not need any template update.
If you are familiar with AngularJs 1.x, this is same as the directive with empty template like short example below:
eg.
angular.directive('myApp', function() {
return {
restrict: 'A',
template: '',
link: function() { ... }
};
);
And of course you can choose to import Page, and use it with template like:
import {Page, ElementRef, Output, EventEmitter, Renderer} from 'angular2/core';
@Page({
selector: 'my-app',
template: 'Your template goes here'
})
// more code...
ElementRef.nativeElement
The similarity of ElementRef.nativeElement in AngularJs 2 with element parameter in Link() in AngularJs 1.x directive.
angular.directive('myApp', function() {
return {
restrict: 'A',
template: '',
link: function(scope, element, attributes) {
// `ElementRef.nativeElement` is almost similar with
// the `element` parameter in this link() function
}
};
);
Renderer.listen() - Angular2 beta 13
Add custom listener to keep track of an event fired, this helps at emitting or initiating additional action.
It works just like how AngularJs 1.x bind an event and initiate its parent's controller function in the scope.
Example AngularJs 1.x below:
angular
.controller('myCtrl', function() {
scope.onClick = function(event) {
console.log(event);
};
})
.directive('myApp', function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
// it bind event to element as in Angular 1.x
$(element).bind('click', function(event) {
scope.onClick(event);
});
}
};
);
In AngularJs 2, more complete version of the sample code from top which indicate the use of Renderer.listen()
import {
Directive,
ElementRef,
Output,
EventEmitter,
Renderer,
Component,
bootstrap
} from 'angular2/core';
@Directive({
selector: '[my-comp]'
})
class myComp {
@Output() click = new EventEmitter();
constructor(el: ElementRef, renderer: Renderer) {
renderer.listen(el.nativeElement, 'click', (event) => {
this.onClick(event);
});
}
onClick(event){
this.click.emit({
value: event
});
}
}
@Component({
template: '<button (click)="showclick($event)" my-comp></button>',
directives: [myComp]
})
class myApp {
showClick($event) {
console.log('changes::', $event);
}
}
bootstrap(myApp);
Reference/learning source: Dynamically add event listener in Angular 2
