Load a component as child component in Angular

Question

I am using angular 6 and trying to import a component as child component.

I have a component which can be accessed by routing to '/register' which loads signUpComponent and and I have other component which loads ServicesComponent using '/services' and also I am using both the routes in multiple components.

Now my problem is that I want to load ServicesComponent as child component of SigUpComponent i.e. something like this '/register/services' (kind of nested routing) with condition that my both routes are defined separately. Is there any way to do it, instead of redefining a third route as '/register/services' with ServicesComponent defined as child component of SigUpComponent

I do not know what exactly you are looking for but have you tried this? angular.io/guide/router#child-routing-component — wannadream
– wannadream, Commented Oct 4, 2018 at 6:54

Aarsh · Accepted Answer · 2018-10-04 07:10:38Z

You can use children routing like this ::

const parentModuleRoutes: Routes = [
    {
        path: 'parent-component',            //<---- parent component declared here
        component: PetParentComponent,
        children: [                          //<---- child components declared here
            {
                path:'child-one',
                component: ChildOneComponent
            },
            {
                path:'child-two',
                component: ChildTwoComponent
            },
            {
                path:'child-three',
                component: ChildThreeComponent
            },
            {
                path:'child-four',
                component: ChildFourComponent
            },
        ]
    }
];

You can use this links for more informations ::

https://angular.io/guide/router#child-routing-component(As per @wannadream says)

https://itnext.io/child-routes-with-respective-components-in-angular-4-36f1be42278e

Collectives™ on Stack Overflow

Load a component as child component in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related