CODEWITHSUNDEEP
angular
Sunanda Kadam
Sunanda Kadam

Reputation: 31

How to make multiple child component and routes in angular 4

i have to make one component with module like dashboard

dashboard.module.ts
dashboard-routing.module.ts
dashboard.component.ts
dashboard.component.html

and i import dashboard.module in app.module.ts, after it again i have to make child of dashboard like department

department.module.ts
department-routing.module.ts
department.component.ts
department.component.html

and import department.module in dashboard.module.ts

i am stuck at how to make child relation in routes like localhost:3000/dashboard/department

without dashboard, department should not be load means localhost:3000/department should not work

Upvotes: 1

Views: 1066

Answers (3)

Shorbagy
Shorbagy

Reputation: 534

All you need is to add in the dashboard routing module the children array on it and it will work well like: 

const routes = [
  {
    path: 'dashboard', component: DashboardComponent, children: [
      { path: 'department', component: DepartmentComponent }
    ]
  }
]

Updated:

A stackblitz example you provide in comments with a working example on it:
https://stackblitz.com/edit/angular-module-stack?file=src%2Fapp%2Fapp.component.html

Upvotes: 1

siddharth shah
siddharth shah

Reputation: 1147

First of all you need to create routing module for app component like,

const routes:Routes = [{
 { path: '',redirectTo: 'dashboard', pathMatch: 'full'},
 { path: 'dashbord', loadChildren: app/..../dashbord.module#DashbordModule'}, 
 { path: '**', redirectTo: 'dashboard', pathMatch: 'full' },
}]

Then you need to create a routing module for Dashboard component like,

const routes:Route = [
{
  path:'',
  component:DashbordComponent,
  {path: '',loadChildred:'app/..../department.module#DepartmentModule'}
  }
]

Here

loadChildren will lazily load your department module.

then u need to create department-routing module like below 

const routes:Routes = [
{
  path:'', component:DepartmentComponent , pathMatch: 'full'
}
]

This will load your department component.

Hopefully this will resolve your issue.

Upvotes: 1

Ruslan Gonzalez
Ruslan Gonzalez

Reputation: 182

It's just a correct use of forRoot and forChild, you can use this sample for your proper routing using childrens.

for your structure I think the best it's:

app /
    |-> pages
        |-> dashboard
            |-> dashboard.component.ts
            |-> dashboard.component.html
        |-> department
            |-> department.component.ts
            |-> department.component.html
        |-> pages.module.ts
        |-> pages.routes.ts  // forChild
        |-> pages.component.ts
    |-> app.module.ts
    |-> app.routes.ts  // forRoot
    |-> app.component.ts
    |-> app.component.html
    |-> app.component.css

and for your app.routes.ts: 

    // forRoot
import { RouterModule, Routes } from '@angular/router';

const APP_ROUTES: Routes = [
    { path: '' }
];

export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES, { useHash: true });

For your pages.routes then use:

    //forChild

import { RouterModule, Routes } from '@angular/router';
import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { DepartmentComponent } from './department/department.component';

const PAGES_ROUTES: Routes = [
    {
        path: '',
        component: PagesComponent,
        children: [
            { path: 'dashboard', component: DashboardComponent, data: { titulo: 'Dashboard' } },
            { path: 'department', component: DepartmentComponent, data: { titulo: 'Department' } },
            { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

        ]
    },
];

export const PAGES_ROUTING = RouterModule.forChild(PAGES_ROUTES);

Hope it works for you.

Regards. Ruslan

Upvotes: 1

Related Questions