CODEWITHSUNDEEP
angular
Saleh Khademi
Saleh Khademi

Reputation: 25

have an admin & user routing structure in angular

I want to create an angular app with 2 separate modules for Admin panel and the site's front-end which I use lazy-loading for modules. Now I want to don't show header and footer components when user goes to /admin route , here is my code:

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

and here is my project structure:

app
  - admin
    -login component
    -dashboard component
    -admin.module
    -admin.routing.module
    -...
  - pages
    -home component
    -products component
    -...
  - shared
  app.component
  app.module
  app.routing.module
...

Can you assist me what should I do? what is the best practice? Thanks a lot

Upvotes: 0

Views: 2703

Answers (2)

Saleh Khademi
Saleh Khademi

Reputation: 25

Finally I find this on StackOverFlow and I think this is a simple solution for my issue.

https://stackblitz.com/edit/angular-multi-layout-example

Upvotes: 0

manzapanza
manzapanza

Reputation: 6215

You could create nested routes for reuse the layout frame for admin and website routes and avoiding to apply rules to show or hide layout elements.

Try something like this:

app-routing.module.ts:

const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthenticationGuard],
    children: [
      {
        path: 'users',
        component: UsersComponent,
        canActivate: [AuthenticationGuard],
      },
      // <-- place here others admin/private routes
    ],    
  },
  {
    path: '',
    component: WebsiteComponent,
    children: [
      {
        path: 'products',
        loadChildren: () => import('./products/products.module').then((m) => m.ProductsModule),
      },  
      // <-- place here others lazy loaded site/public routes
    ],        
  },
];

app.component.html

<router-outlet></router-outlet>

admin.component.html:

<app-admin-header></app-admin-header>
<router-outlet></router-outlet>
<app-admin-footer></app-admin-footer>

In this way /admin/users and all other admin child routes with have the admin header and footer.

website.component.html:

<app-website-header></app-website-header>
<router-outlet></router-outlet>
<app-website-footer></app-website-footer>

and /products and all other website child routes with have the website header and footer.

I hope it will help, try it and enjoy!

Upvotes: 1

Related Questions