can not load two router outlets in angular

Question

I am using angular 7 in my application. below is my routing file

const appRoutes: Route[] = [
    { path: '', redirectTo: 'login', pathMatch: 'prefix' },
    { path: 'login', component: LoginComponent },
    { path: 'add', component: CreateEmployeeComponent},
    { path: 'viewemp', component: ViewEmployeeComponent, outlet: 'viewemp'}

];

below is the code which i am using in component.ts file.

this.router.navigate(['/add', {outlets: {'viewemp': 'viewemp'}}]);

but i am getting error while navigating.

I have added two router-outlet tags as below.

<router-outlet></router-outlet>
<router-outlet name="viewemp"></router-outlet>

Kindly let me know how to resolve this issue while using router.navigate(--)

Have you tried something like this? https://stackoverflow.com/a/42204114/6621862 — Luke, Jul 22 '20 at 13:11

score 0 · Answer 1 · answered Jul 22 '20 at 13:59

0

I guess there is the syntax problem. The router is used with outlets in bit different way. Please try the below mentioned line for calling the navigation. This might resolve the error.

this.router.navigate([{ outlets: { viewemp: ['/add'] } }])

answered Jul 22 '20 at 13:59

Minal Shah

1,402
1
5
13

can not load two router outlets in angular

1 Answers1