CODEWITHSUNDEEP
angular-ui-routerangular2-routingangular6angular2-router
Saurav Dutta
Saurav Dutta

Reputation: 81

Angular: children route not detected

This is my dashboard.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {JwtModule} from '@auth0/angular-jwt';
import {AuthService} from '../services/auth.service';

import {dashboardComponent} from './dashboard.component';
import { foodPollComponent } from '../modules/foodPoll/foodPoll.component';
import { dashboardModuleRoutingModule } from './dashboard.routing.module';

@NgModule({
imports: [
CommonModule, dashboardModuleRoutingModule
],
declarations: [
dashboardComponent,
foodPollComponent
],
providers: [JwtModule, AuthService]
})
export class dashboardModule { }

This is my dashboard.routing.module.ts

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

import { dashboardComponent } from './dashboard.component';
import { foodPollComponent } from '../modules/foodPoll/foodPoll.component';

const routes: Routes = [
{
    path: 'dashboard',
    component:dashboardComponent
},
{
    path: 'dashboard/:id',
    component: dashboardComponent,
    children: [
        {
            path: 'foodPoll',
            component: foodPollComponent,
            outlet: "details"
        }
    ]
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class dashboardModuleRoutingModule {}

This is my dashboard.component.html

<div class="dashboard">
 <header>Random header text</header>
 <router-outlet name="details"></router-outler>
</div>

But when I change from localhost:4200/dashboard to localhost:4200/dashboard/foodPoll, nothing renders in the router outlet view. The view still remains the same as dashboard page.

Where I am doing wrong? Any help would be appreciated. Thanks

Upvotes: 0

Views: 58

Answers (1)

un.spike
un.spike

Reputation: 5133

path: 'dashboard/:id',
component: dashboardComponent,
children: [
    {
        path: 'foodPoll',
        component: foodPollComponent,
        outlet: "details"
    }
]

dashboardComponent would be on url: "dashboard/...anything.../"

foodPollComponent would be on url: "dashboard/...anything.../foodPoll"

:id - is dynamic parameter for dashboardComponent

Upvotes: 0

Related Questions