navigation help using roting in angular


Look at the following list –

  1. auth
  2. auth/login
  3. auth/forget-password
  4. dashboard
  5. dashboard/cart
  6. dashboard/delivery
  7. dashboard/users

auth has a common backgound for login and forget-passowrd.

  const routes: Routes = [
    path: 'auth',
    loadChildren: () => import('./auth/auth.module')
      .then(m => m.AuthModule)

    path: 'dashboard',
    loadChildren: () => import('./admin-dashboard/admin-dashboard.module').then(m => m.AdminDashboardModule)

  { path: '', redirectTo: '/auth/login', pathMatch: 'full' },
  { path: '**', redirectTo: '/auth/login', pathMatch: 'full' }

and dashboard looks like this…

const routes: Routes = [
    path: '',
    component: DashboardMainComponent,
    children: [
      { path: '', component: DashboardBodyComponent },
      { path: '', loadChildren: ()=> import('./dashboard-common/dashboard-common.module').then(m=>m.DashboardCommonModule)}]
   // loading dashboard-common which is the common part of cart, delivery and user component


There are some cards in dashboard body component with names cart, delivery and users.
dashboard-header has nav bar which will be common in every page. it is loading in dashboard-main in selector tag and dashboard-body is loading in inside dashboard-main also. Now i want to connect cart and delivery with dashboard. I can make cart and delivery the child components of in dashboard by routing using children array but the thing is cart, users and delivery page has a common part like this….

----------------- NAV BAR ------------- (inside dashboard-main-component)

<-back                              + add   (common part
-------*cart------delivery-----users------- (common part)

i can do make it load like this…
I can also include the common part in all three pages (repetition)
I can also try making cart users and delivery as separate modules and lazy load them inside dashboard as children.

Any suggestions ? If you want more information then reply me

Source: Angular Questions


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us