How to navigate to secondary router outlet that sits in component that is displayed in primary router outlet?

Question

So, after hours of searching I couldn't find a similar problem. The setup is as follows: one app module and one routing module. Component that is displayed in primary router outlet is user-component and primary router outlet is in app-component html file. I want to navigate to router outlet that sits in html of user-component. I only found nested routing and multi-outlet routing examples/solutions that navigate through app where all or both routers are in the same html file. Is this somehow possible?

Answer 1

1. If you want to achieve without named outlet :-

In your routing config what ever component you want to display inside router outlet inside user component should be as children routes under user component :- for eg:

   [
     {
       path: 'user',
       component: UserComponent,
       children: [
         {
            path: 'info',
            component: UserInfoComponent
         }
       ]
     }
   ]

2. If you want to achieve it via named router-outlet Give a name to router-outlet inside user component, lets say abc.

   With routes of component which you want to show inside this outlet Give outlet property as abc. while routing tell which auxiliary route to choose.

   this.router.navigate(["user", { outlets: { abc: ["info"] } }]);

   And your routing config will be :-

   [ { path: 'user', component: UserComponent, children: [ { path: 'info', component: UserInfoComponent, outlet: "abc" } ] } ]