I aso find this extremely confusing. as @EricMartinez points out Renderer2 listen() returns the function to remove the listener:
ƒ () { return element.removeEventListener(eventName, /** @type {?} */ (handler), false); }
If i´m adding a listener
this.listenToClick = this.renderer.listen('document', 'click', (evt) => {
alert('Clicking the document');
})
I´d expect my function to execute what i intended, not the total opposite which is remove the listener.
// I´d expect an alert('Clicking the document');
this.listenToClick();
// what you actually get is removing the listener, so nothing...
In the given scenario, It´d actually make to more sense to name it like:
// Add listeners
let unlistenGlobal = this.renderer.listen('document', 'click', (evt) => {
console.log('Clicking the document', evt);
})
let removeSimple = this.renderer.listen(this.myButton.nativeElement, 'click', (evt) => {
console.log('Clicking the button', evt);
});
There must be a good reason for this but in my opinion it´s very misleading and not intuitive.