How to load the nested component as default in the child component

Question

I would like to set the default component for my child component. how to do that? here is my router.ts

{
        path: 'cpServices',
        component: CpServiceComponent,
        children: [
            {
                path: '',
                redirectTo: 'contentPlaceholder',
                pathMatch: 'full'
            },
            {
                path: 'contentPlaceholder', //child has outlet
                component: ShellContentPlaceholderComponent,
                children : [
                    {
                        path: 'create', //need as default
                        component: ShellContentCreatePlaceholderComponent
                    }
                ]
            }

        ]
    }

Addition Request

<div class="site-wrapper">
    <header-nav-shell></header-nav-shell>
    <div class="main-section">
        <div class="content-left"> //some times need to hide this, how?
            <side-nav-shell></side-nav-shell>
        </div>
        <div class="content-right">
            <router-outlet></router-outlet>
        </div>
    </div>
    <app-footer></app-footer>
</div>

Muhammed Albarmavi · Answer 1 · 2019-08-07T09:53:25.153

just create a wildcard for empty space to redirect to default component

{
        path: 'cpServices',
        component: CpServiceComponent,
        children: [
            {
                path: '',
                redirectTo: 'contentPlaceholder',
                pathMatch: 'full'
            },
            {
                path: 'contentPlaceholder', //child has outlet
                component: ShellContentPlaceholderComponent,
                children : [
                    {
                        path: 'create', //need as default
                        component: ShellContentCreatePlaceholderComponent
                    },
                    {
                     path: '', // 
                     redirectTo: 'create',
                     pathMatch: 'full'
                    },
                ]
            }

        ]
    }

or this way by set the redirectTo to the ShellContentCreatePlaceholderComponent like this

{
        path: 'cpServices',
        component: CpServiceComponent,
        children: [
            {
                path: '',
                redirectTo: 'contentPlaceholder/create', // 
                pathMatch: 'full'
            },
            {
                path: 'contentPlaceholder', //child has outlet
                component: ShellContentPlaceholderComponent,
                children : [
                    {
                        path: 'create', //need as default
                        component: ShellContentCreatePlaceholderComponent
                    }

                ]
            }

        ]
    }

yes, works. can you see `Addition Request` in my question part? do you have any idea about it? some component side navi not requried — 3gwebtrain, Aug 07 '19 at 09:23
in that case you need to create aglobal service and emit a value on the ShellContentCreatePlaceholderComponent ngOninit method , you need to create a basic comunication between components — Muhammed Albarmavi, Aug 07 '19 at 10:01
it can be work but you need to get this `ShellContentPlaceholderComponent` and `ShellContentCreatePlaceholderComponent` both will be loaded so it 's better to emit a value `ShellContentCreatePlaceholderComponent ` in init and destroy — Muhammed Albarmavi, Aug 07 '19 at 10:15
you can check the router event can be a better way in her e https://stackoverflow.com/questions/33520043/how-to-detect-a-route-change-in-angular — Muhammed Albarmavi, Aug 07 '19 at 10:17

How to load the nested component as default in the child component

1 Answers1