5

I have top navigation menu and side bar menu . In the top navigation menu items like admin, user..etc. When we click admin link the side bar menu should list the admin related menu like settings , user management etc..

This was achieved using auxiliary route outlet , now my problem was i would like to remove the URL param with outlet EX : /admin/(user/list//sidemenu:sidemenu) . My outlet name is side-menu. I want the URL like /admin/user/list and it should load the outlet in sidebar menu as well.

How to achieve this ? Anyone please help me.

Kati
  • 51
  • 1
  • 6

1 Answers1

2

To clear our secondary route through template:-

<a [routerLink]="[{outlets: {sidemenu: null}}]">X</a>

Or through component by setting the navigate method to same as above in the template

this.route.navigate([{outlets: {sidemenu: null}}]);

Or you can simply use navigateByUrl like

this.route.navigateByUrl('/someRoute');
Suryan
  • 701
  • 7
  • 17
  • 2
    This doesn't seem to work from within a component in the auxiliary outlet... so a modal popup cannot close itself... anyone has a solution to this? – Spock Jun 05 '19 at 09:12
  • 1
    @Spock You should assign the close button click event to a method that calls the statement in the second code snippet. Once this is executed, the router outlet will be emptied, making the modal popup HTML disappear from the DOM and from the screen. – marcioggs Oct 14 '21 at 08:02
  • To close a secondary route from within a modal: ```this.router.navigate([{ outlets: { modal: null } }], { relativeTo: this.route.parent });```. See this blog post: https://www.bennadel.com/blog/3351-closing-secondary-router-outlet-views-from-within-the-named-route-view-components-in-angular-4-4-4.htm. – JoshMB Jun 17 '22 at 17:07