I am trying to implement a menu including the most recently visited and most monly visited pages within the Angular app. How can I get the navigation stack? Or do I need to hook the navigationStart event and pile it as it is created?

I am trying to implement a menu including the most recently visited and most monly visited pages within the Angular app. How can I get the navigation stack? Or do I need to hook the navigationStart event and pile it as it is created?

• javascript
• angular
• angular7

• What is the scope? Do you want to track most popular pages for the current user? all users? all tabs/windows? – umutesen Commented Mar 5, 2019 at 9:28
• At the moment Angular doesn't have built-in possibility to get all navigation history. You need to use navigation events to store navigation history for further needs. – taras-d Commented Mar 5, 2019 at 10:00
• you can store all visited route. your question answers is this link – mosi98 Commented Mar 5, 2019 at 10:22

1 Answer 1

I don't think it is possible to get the full history with a simple method call, but you can track this easily yourself by subscribing to the NavigationEnd.

previousUrl: string;
constructor(router: Router) {
  router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe(e => {
    console.log('prev:', this.previousUrl);
    this.previousUrl = e.url;
  });
}

In this sample it saves only the previous route, but you could store in an array to save all the previously visited routes.

See also: How to determine previous page URL in Angular?

Update:

You can use the above code in bination with the code below to subscribe to the NavigationEnd in your service from the start of your application.

export class AppModule {
constructor(navigationEndService: NavigationEndService) {
    navigationEndService.init();
}

To get hold of the list in other places you could create a getter in the service.