Jeff Jeff - 4 months ago 24
Javascript Question

How to listen for Angular 2 native page change event and prevent default?

How can I listen for the event that is triggered when route change starts? How can I stop that event? It looks as though the event object doesn't have any methods that can stop this according to the docs.

this.router.events
.filter(event => event instanceof NavigationStart)
.subscribe((event) => {
console.log(event);
event.preventDefault(); // NavigationStart doesn't have this method
});


After stopping it, how can I programmatically trigger route change again?

My end goal is to delay the route change for about 1 second to allow page change animations to complete. So, page change animations on exit.

Answer Source

in the HTML it would be:

(click)="timedFunction()"

and the function would carry out a timed animation and route after it has completed.

After the time animation completes:

this.router.navigate([route])