angularangular-auxiliary-routes

Create Angular Project with sidebar and dynamic content / components - auxiliary-routes

I would love to build a site with two large parts. Once a login page and once a kind of dashboard with subpages.

The dashboard should have a side menu with a content area. The various components should be displayed accordingly in the content area.

Do you have any ideas how I could do that? I first solved this with Auxiliary Routes.

However, this has the disadvantage that the URL now looks like this:

http://localhost:4200/(login:login)

And I cannot access the page via '/login'. Here is the code for the Auxiliary Routes:

In the app-routing.modules.ts

{
    path: 'login',
    component: LoginComponent,
    outlet: 'login'
},

And the code to navtigate to the login page:

this.router.navigate(['', { outlets: { login: ['login'] } }]);

And the app.component.html:

<router-outlet></router-outlet>
<router-outlet name="login"></router-outlet>

How can I either solve the problem with the URL or, at best, create a second router outlet for a template with a side menu and dynamic content for components?

Solution

  • You can use nested router outlet's which will keep your routes simple as they should be then you also don't have to provide the outlet name while using routes. Nested Outlets provide best of both worlds.

    You can refer them here :- https://medium.com/dev-genius/the-art-of-nested-router-outlets-in-angular-dafb38245a30#:~:text=While%20designing%20your%20Angular%20Application,that%20particular%20tab%20is%20selected.