Angular: children route not detected - angular-ui-router

Question

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

Answer 1

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