AngularJs 2 Component: manually bind event listener to element

Sample code of binding element to an onchange event.

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));
  }
}

Stuff you need:

• 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

Implant / inject event function to every (change of src) page in iframe with AngularJs

To inject an event manually with AngularJs (from the outside of child iframe),
you'll need two key things:

• window.onload()
• window.onmousedown

You'll need an angular directive to help injecting the event function and iframe page being "load".

// inject touch event to iframe child body
angular.directive('iframe', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      element[0].onload = function() {
        scope.loaded();
      };
    },
    controller: function($scope, $window) {
      $scope.loaded = function() {
        $window.frames[0].window.onmousedown = function() {
          alert('Touched!');
        };
      };
    }
  };
});

Firstly, from element[0], you'll get your iframe element.
2nd, prepare a "loaded()" function to let "link()" to initiate for "onload()".


This solution made by the inspiration from AngularJS: onLoad from an iframe directive by Ashish Datta