I'm currently tackling a project in Angular where I find myself in need of two router outlets. The primary outlet is responsible for loading main pages and the dashboard page, while the secondary outlet, which I've dubbed "mainview", loads the component selected in the sidebar of the dashboard page (I'm currently only testing this with URLs).
Below is the routing module that I've put together:
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 content into 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 attempted to load the orders component into the mainview using the following URL:
http://localhost:4200/dashboard(mainview:orders)
Here's how the dashboard page appears, with the white space waiting for the "mainview" outlet content to display: https://i.sstatic.net/IAssX.png
However, the area remains blank. I might be missing something obvious as this is my first time working with named router outlets. Please advise on how I can ensure that the secondary outlet "mainview" displays the orders component. Thank you!