CODEWITHSUNDEEP
angularangular2-routing
DGmip
DGmip

Reputation: 302

Angular 2+ parent / child routes

I have these two routes set up

{ path: 'manage-brands', component: ManageBrandsComponent, canActivate: [AuthGuard] },

{ path: 'manage-brand/:brandId',  component: BrandAdminComponent },

But what I really want is this: /manage-brands -> ManageBrandsComponent and then should there be an id in the route /manage-brands/brandId -> BrandAdminComponent

Is there a way to achieve this using children: [ ] or do I have to render an ng-template based on a RouteSnapshot using just one component?

Upvotes: 0

Views: 71

Answers (1)

James
James

Reputation: 1219

Here is a Parent-Child way to achieve this behavior.

const routes: Routes = [

{
    path: 'manage-brands', component: ManageBrandsComponent,
    canActivate: [AuthGuard],
    children: [
      { path: ':brandId', component: BrandAdminComponent }
    ]
}

]

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Upvotes: 4

Related Questions