Dynamically add event listener in Angular 2 -

morning all, starting mess around angular 2 , wonder if can tell me best way dynamically add , remove event listeners elements.

i have component set up. when element in template clicked want add listener mousemove element of same template. want remove listener when third element clicked.

i kind of got working using plain javascript grab elements , calling standard addeventlistener() wondered if there more "angular2.0" way of doing should looking into.

cheers advice :)

renderer has been deprecated in angular 4.0.0-rc.1, read update below

the angular2 way use listen or listenglobal renderer

for example, if want add click event component, have use renderer , elementref (this gives option use viewchild, or retrieves nativeelement)

constructor(elementref: elementref, renderer: renderer) {      // listen click events in component     renderer.listen(elementref.nativeelement, 'click', (event) => {       // 'event'     }) ); 

you can use listenglobal give access document, body, etc.

renderer.listenglobal('document', 'click', (event) => {   // 'event' }); 

note since beta.2 both listen , listenglobal return function remove listener (see breaking changes section changelog beta.2). avoid memory leaks in big applications (see #6686).

so remove listener added dynamically must assign listen or listenglobal variable hold function returned, , execute it.

// listenfunc hold function returned "renderer.listen" listenfunc: function;  // globallistenfunc hold function returned "renderer.listenglobal" globallistenfunc: function;  constructor(elementref: elementref, renderer: renderer) {      // cache function "listen" returns     this.listenfunc = renderer.listen(elementref.nativeelement, 'click', (event) => {         // 'event'     });      // cache function "listenglobal" returns     this.globallistenfunc = renderer.listenglobal('document', 'click', (event) => {         // 'event'     }); }  ngondestroy() {     // execute both functions remove respectives listeners      // removes "listen" listener     this.listenfunc();      // removs "listenglobal" listener     this.globallistenfunc(); } 

here's plnkr example working. example contains usage of listen , listenglobal.

using rendererv2 angular 4.0.0-rc.1+ ^{_{(renderer2 since 4.0.0-rc.3)}}

• 25/02/2017: renderer has been deprecated, should use rendererv2 (see line below). see commit.

• 10/03/2017: rendererv2 renamed renderer2. see breaking changes.

rendererv2 has no more listenglobal function global events (document, body, window). has listen function achieves both functionalities.

for reference, i'm copy & pasting source code of dom renderer implementation since may change (yes, it's angular!).

listen(target: 'window'|'document'|'body'|any, event: string, callback: (event: any) => boolean):       () => void {     if (typeof target === 'string') {       return <() => void>this.eventmanager.addglobaleventlistener(           target, event, decoratepreventdefault(callback));     }     return <() => void>this.eventmanager.addeventlistener(                target, event, decoratepreventdefault(callback)) as() => void;   } 

as can see, verifies if we're passing string (document, body or window), in case use internal addglobaleventlistener function. in other case, when pass element (nativeelement) use simple addeventlistener

to remove listener it's same renderer in angular 2.x. listen returns function, call function.

example

// add listeners let global = this.renderer.listen('document', 'click', (evt) => {   console.log('clicking document', evt); })  let simple = this.renderer.listen(this.mybutton.nativeelement, 'click', (evt) => {   console.log('clicking button', evt); });  // remove listeners global(); simple(); 

plnkr angular 4.0.0-rc.1 using rendererv2

plnkr angular 4.0.0-rc.3 using renderer2