CODEWITHSUNDEEP
angular
Zach Starnes
Zach Starnes

Reputation: 3198

Navigate to a child route by default angular

I am trying to navigate to a child route by default so here are my routes:

const routes: Routes = [
  {
    path: '', --> /config
    redirectTo: 'branding',
    component: ConfigurationComponent,
    children: [
      { path: 'branding', component: BrandingComponent },
      { path: 'channel-branding', component: ChannelBrandingComponent },
      { path: 'date-time', component: DateTimeSettingsComponent },
      { path: 'graph', component: GraphSettingsComponent },
      { path: 'grid', component: GridSettingsComponent },
      { path: 'labels', component: LabelSettingsComponent }
    ]
  },
];

the parent route is /config and the children are /config/branding etc I would like to go to /config/branding by default if someone navigates to /config. I tried using redirectTo but that seems to break all the things. How can I get this behavior?

Upvotes: 3

Views: 181

Answers (1)

Mujadid Mughal
Mujadid Mughal

Reputation: 2663

Add the redirection in your children array, like this

 children: [
      { path: '', redirectTo: 'branding' },
      { path: 'branding', component: BrandingComponent },
      { path: 'channel-branding', component: ChannelBrandingComponent },
      { path: 'date-time', component: DateTimeSettingsComponent },
      { path: 'graph', component: GraphSettingsComponent },
      { path: 'grid', component: GridSettingsComponent },
      { path: 'labels', component: LabelSettingsComponent }
    ]

Thanks.

Upvotes: 4

Related Questions