keeping default route with parent route in angular

user_8130566 0
Viewed 249

I have parent route called "Profile" and inside I have child routes like basic, company, contacts. So when I click on the parent route like Profile then by default it should show the content present in the basic component. 

export const appRoutes: Routes = [
{ path: 'profile', component: ProfileComponent,
        children: [
            {
                path: 'basic',
                component: BasicComponent,
                pathMatch: 'full'
            },
            {
                path: 'company',
                component: CompnayComponent
            },
            {
                path: 'contacts',
                component: ContactsComponent
            },
            {
                path: 'compliance',
                component: ComplianceComponent
            }
        ]
    }

So when the user clicks on Profile then automatically the content in the basic should display. So how to achieve this? Can anyone help me?

angular-routing angular
2 Answers

add redirect to basic in your routes config:

 export const appRoutes: Routes = [
 { path: 'profile', component: ProfileComponent,
    children: [
         {
            path:'',
            redirectTo: 'basic',
            pathMatch: 'full' 
        },
        {
            path: 'basic',
            component: BasicComponent,
            pathMatch: 'full'
        },
        {
            path: 'company',
            component: CompnayComponent
        },
        {
            path: 'contacts',
            component: ContactsComponent
        },
        {
            path: 'compliance',
            component: ComplianceComponent
        }
    ]
}
user_43992810

Add a redirect to basic in the child routes

{path: '', redirectTo: 'basic'}

If you now navigate to /profile/ it will redirect to /profile/basic

user_53094490
Related