CODEWITHSUNDEEP
angulartypescriptangular-routingrouter-outlet
Reda
Reda

Reputation: 39

Named router outlet not displaying anything

im currently working on an angular project where i need two router outlets, one is the primary outlet for loading main pages and the dashboard page, and the other that i called "mainview" loads the component selected in the sidebar of the dashbaord page (currently only testing with url).

Here's the routing module i created:

import { OrdersComponent } from './pages/orders/orders.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { AuthentificationComponent } from './pages/authentification/authentification.component';
import { IndexComponent } from './pages/index/index.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {path: '', component: IndexComponent, pathMatch: 'full'},


  {path: 'login', component: AuthentificationComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: 'orders', component: OrdersComponent, outlet: 'mainview'},

  {path: '**', redirectTo: '', pathMatch: 'full'},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

and here's the dashboard page that loads the secondary outlet:

<mat-drawer-container class="example-container">
    <mat-drawer mode="side" opened>
        <app-sidebar></app-sidebar>
    </mat-drawer>
    <mat-drawer-content>
        <router-outlet name="mainview"></router-outlet>
    </mat-drawer-content>
</mat-drawer-container>

i tried loading the orders components in the mainview page using this url:

http://localhost:4200/dashboard(mainview:orders)

Here's the dashboard page, the white space is where the "mainview" outlet content should display: dashboard image

but it stays blank, maybe im making an obvious error, but this is my first time working with named router outlets, please let me know how i can get the secondary outlet "mainview" to display the orders component. And thanks

Upvotes: 2

Views: 5710

Answers (2)

ali abodaraa
ali abodaraa

Reputation: 1

to make it work you need to apply routerLink directive on the link in IndexComponent that you want to show the orders through clicking it .

<a [routerLink]="[{ outlets: { mainview: ['orders'] } }]"> orders </a>

if you want to show it immediately when you navigate to dashboard you can add the following route to the routes array

    {path: 'dashboard', component: OrdersComponent, outlet:'mainview'}

this will make the OrdersCompont on the right of IndexComponet

Upvotes: 0

Chris Hamilton
Chris Hamilton

Reputation: 10954

If you're loading the OrdersComponent inside the DashboardComponent then you need to first load the DashboardComponent and then the OrdersComponent. The way you have it set up would only work if the dashboard outlet and the mainview outlet were both in your top level component. For nested router-outlets use the children property.

const routes: Routes = [
  {path: '', component: IndexComponent, pathMatch: 'full'},
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: 'orders',
        component: OrdersComponent,
        outlet: 'mainview',
      },
    ],
  },
  {path: 'orders', component: OrdersComponent, outlet: 'mainview'},
  {path: '**', redirectTo: '', pathMatch: 'full'},
];

You would navigate like this: http://localhost:4200/dashboard/(mainview:orders)

In this case the outlet name is unnecessary since it's the only router-outlet in the dashboard component.

Upvotes: 6

Related Questions