Angular all menu items to get access to the current id

Issue

Hopefully someone could help I have a sidebar with a list of items and each list item has a routerlink and I am struggling how to get the id of the current selection so each list item has that id to pass on to the component.

The app starts with a list of items from the database and when I click on the row it takes me to the child object and in the url has the id so that part is working but I somehow need to get that id so all the items in my sidebar have access to that id but can't figure it out and thought this was going to be an easy part and left it to the end.

So I need somehow once the item is selected that all items in routerlink get access to it.

<a [routerLink]="['/addresses/', this.id]" >Addresses <a [routerLink]="['/reports/', this.id]" >Reports

Thank you

Solution

According to this post you can subscribe to changes of the route inside the sidebar component.

Try the following:

constructor(private router: Router) {
    router.events.subscribe((routerEvent) => {
        if (routerEvent instanceof NavigationEnd) {
          console.log('current route:', routerEvent.url);
          // parse the id from the url here e.g. routerEvent.split('/')[2]
        }
    });
  }

Answered By - Simon