Home / Angular / How to setup guide for Development and Unit Test Environments? Angular 5 Router lifecycle events .?

How to setup guide for Development and Unit Test Environments? Angular 5 Router lifecycle events .?

Angular 5 Router lifecycle events .?

It allowing developers to track the cycle of the router from the start of running guards through to completion of activation.

The new events (in sequence) are GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd.

These events could be used for things such as showing a spinner on a specific router outlet when a child is updating or to measure the performance of guards and/or resolvers.

An example of using these events to start/stop a spinner might look like this:


class MyComponent {
constructor(public router: Router, spinner: Spinner) {
router.events.subscribe(e => {
if (e instanceof ChildActivationStart) {
spinner.start(e.route);
} else if (e instanceof ChildActivationEnd) {
spinner.end(e.route);
}
});
}
}

About Mohammad Fareed

Software Engineer @ Tekzenit.

Check Also

What’s new In Angular 5? What Is the Difference Between Angular 4 and Angular 5?

Angular, one of the best open-source JavaScript frameworks for web application development, recently upgraded with …

Leave a Reply

Your email address will not be published. Required fields are marked *