Add ability to remove event handlers by name

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[X] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

No way to remove an element’s event handler without the original eventhandler.

Expected behavior

Ability to remove an element’s event handler by name alone.

Minimal reproduction of the problem with instructions

Consider the following:

@Directive({
    selector: "[disable-click]"
})
export class DisableClickDirective implement OnInit {

    ngOnInit(){
        // here I would like to be able to remove other event listeners according to some input params
    }

    @HostListener("click", ["$event"])
    onClick(event){
        event.preventDefault();
        event.stopPropagation();
        return false;
    }
}

and:

@Component({
    selector: "[my-component]",
    template: `<button (click)="onMyClick($event)" disable-click></button>`
})
export class MyComponent {
    onMyClick(event){
        console.log(event)
    }
}

In this example, I have no way of disabling the previously registered (click) on the host element, so both onClick and onMyClick are triggered (I don’t fully understand why preventDefault doesn’t actually prevent default, but from what I could see when debugging, both onClick and onMyClick were triggered by the same ZoneTask - if it’s a bug, please let me know). If I could remove the click event handlers, that would solve this problem. This is the simplest usage I could think of…

What is the motivation / use case for changing the behavior?

In jQuery we are able to remove an element’s event handlers by name, without knowing the handler. This is very convenient in some cases.

Environment

Angular version: 5.1.2


Browser:
- [X] Chrome (desktop) version 63.0.3239.132
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 

[JiaLiPassion]

@omermizr , in current version of angular

• you can get all listeners by call (target as any).eventListeners('click')
• you can remove all listeners by call (target as any).removeAllListeners('click').

But because in the future version of angular, the addEventListener maybe optimized to bypass zone.js patching, so those APIs maybe not available any longer.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}