Search code examples
angularangular-routerangular8

Angular: How to navigate to child route from parent component by using navigate method


Here is my html rouerLink:

<a [routerLink]="['create']">Create</a> - works fine.

on button click I am calling the same as: But not works..

navigateTo(page) {
        this.router.navigate(['create']); //not works
    }

Any one help me, what is really I am missing here?

UPDATE

I am navigating from parent to child

here is the routes:

{
                path: 'contentPlaceholder',
                data: { showNavi: true },
                component: ShellContentPlaceholderComponent,

                children : [
                    {
                        path: 'view',
                        data: { showNavi: false },
                        component: ShellContentViewPlaceholderComponent,
                    },
                    {
                        path: 'create',
                        data: { showNavi: false },
                        component: ShellContentCreatePlaceholderComponent,
                    },
                    {
                        path: 'edit',
                        data: { showNavi: false },
                        component: ShellContentEditPlaceholderComponent,
                    },
                    {
                        path: 'update',
                        data: { showNavi: false },
                        component: ShellContentUpdatePlaceholderComponent,
                    }
                ]
            }

Solution

  • Try by setting relativeTo value to current Route:

    constructor(private router: Router, private route: ActivatedRoute) {}
    

    and then:

    this.router.navigate(['./create'], { relativeTo: this.route });