Angular2 - how to trigger event before (click) or (routerLink)

Question

I've created a simple component with template:

<div (click)="onClick();">Click me</div>

In *.ts file I've got something like that:

public onClick() {
    console.log('click');
}

@HostListener('document:click', ['$event'])
public onClickListener(event: Event) {
    console.log('click listener');
}

In this case onClick function is called always before onClickListener.

My goal is to invoke some method before Angular (click) or (routerLink) etc.

It's possible?

What is important - this listener should be a global method, which handle all clicks during runtime.

What are you trying to invoke before click. Why can it not be handled in the click event? — LLai
– LLai, Commented Dec 20, 2017 at 18:34
I'm sure I understand properly your issue. Why not just do : public onClick() { methodToExecuteBefore(); console.log('click'); } ? — mickdev
– mickdev, Commented Dec 20, 2017 at 18:34
Because onClickListener will be in root (main) component finally and must handle all clicks (not only (click)). — szmitas
– szmitas, Commented Dec 20, 2017 at 18:39
Do you want to handle clicks anywhere in the application, or only on buttons? — Martin Parenteau
– Martin Parenteau, Commented Dec 20, 2017 at 19:08

Martin Parenteau · Accepted Answer · 2017-12-21 02:44:51Z

1

If you want to handle the click events anywhere in the application before they are handled by Angular, you can add a click event listener to the window and specify that the event will be processed in the capture phase. In the following code snippet, addEventListener("click", fn, useCapture) is called with useCapture set to true (see the MDN documentation).

window.addEventListener("click", () => {
  console.log("Global click handler");
}, true);

You can see it at work in this plunker.

edited Dec 21, 2017 at 2:44

answered Dec 20, 2017 at 19:13

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LLai Over a year ago

very nice implementation

szmitas Over a year ago

And that is what I was looking for.

Collectives™ on Stack Overflow

Angular2 - how to trigger event before (click) or (routerLink)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related