How can I display a two-level nested component in Angular using the `router-outlet` feature?

Question

How can I display a two-level nested component in Angular using the `router-outlet` feature?

Having a sidebar containing links at the /dashboard route, where these links serve as direct children to /dashboard. The goal is to render these children of /dashboard within the main router-outlet, but unsure of how to proceed. Below are code snippets illustrating the issue:

Reviewing the Routing Structure

const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: 'roles',
        component: RolesComponent,
      },
      {
        path: 'workgroups',
        component: WorkgroupsComponent,
        children: [
          {
            path: 'savewg',
            component: WgDetailsComponent,
          },
        ]
      },
      {
        path: 'users',
        component: UsersComponent,
      },
    ],
  },
];

Main App Component Structure

<!-- Main app component -->
<div class="app-view">
 <router-outlet></router-outlet>
</div>

Login.html Implementation

<button mat-raised-button color="warn" class="login-field" (click)="login(email, password)"
            <!-- rest of the code omitted for brevity  -->

Login.ts Functionality

public login(email: string, password: string) {
    this.router.navigate(['dashboard'], { replaceUrl: true });
  }

Workgroup Component HTML Section

    <button mat-raised-button color="warn" [routerLink]="['savewg']">
            <mat-icon>add</mat-icon>
              New
        </button>
       <!-- Code omitted for brevity ... -->

<router-outlet></router-outlet>
<div class="workgroup-filters">
<mat-form-field appearance="outline">
    <!-- remaining code omitted for brevity -->

Desiring the ability for the New button in the workgroup component to navigate to the savewg component view and replace the content within the workgroup component.
Grateful for any suggestions on addressing this challenge.

javascript angular typescript

Answer 1

Answer №1

In each module, only one main router-outlet is allowed. To handle multiple routes for different functionalities, you need to create a separate module specifically for the workgroups path and lazy load it. This new module will have its own routing file defining all the routes related to workgroups, as well as its own router outlet where these routes will be loaded from the workgroup module. Check out the working example provided below.

app-routing.module.ts

const routes: Routes = [
  ...
  {
    path: 'workgroups',
    loadChildren: () => import('./workgroups/workgroups.module').then(m => m.WorkgroupsModule)
  },
  ...
];

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

workgroups-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: WorkgroupsComponent,
    children: [
      {
        path: 'savewg',
        component: WgDetailsComponent
      },
      {
        path: '**',
        redirectTo: 'savewg',
        pathMatch: 'full'
      }
    ]
  },
  
];

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

workgroups.module.ts

@NgModule({
  imports: [
    CommonModule,
    WorkgroupsRoutingModule
  ],
  declarations: [
    WorkgroupsComponent, 
    WgDetailsComponent
    ]
})
export class WorkgroupsModule { }

For more information on lazy loading modules and to see a demonstration, refer to the resources and stackblitz example provided below.

https://stackblitz.com/edit/angular-ivy-hbogtn

Answer 2

In each module, only one main router-outlet is allowed. To handle multiple routes for different functionalities, you need to create a separate module specifically for the workgroups path and lazy load it. This new module will have its own routing file defining all the routes related to workgroups, as well as its own router outlet where these routes will be loaded from the workgroup module. Check out the working example provided below.

app-routing.module.ts

const routes: Routes = [
  ...
  {
    path: 'workgroups',
    loadChildren: () => import('./workgroups/workgroups.module').then(m => m.WorkgroupsModule)
  },
  ...
];

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

workgroups-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: WorkgroupsComponent,
    children: [
      {
        path: 'savewg',
        component: WgDetailsComponent
      },
      {
        path: '**',
        redirectTo: 'savewg',
        pathMatch: 'full'
      }
    ]
  },
  
];

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

workgroups.module.ts

@NgModule({
  imports: [
    CommonModule,
    WorkgroupsRoutingModule
  ],
  declarations: [
    WorkgroupsComponent, 
    WgDetailsComponent
    ]
})
export class WorkgroupsModule { }

For more information on lazy loading modules and to see a demonstration, refer to the resources and stackblitz example provided below.

https://stackblitz.com/edit/angular-ivy-hbogtn

Answer 3

Answer №2

After some exploration, I came across a more efficient solution for this issue. It appears that Angular automatically interprets the empty path route as the default route, eliminating the need to concern ourselves with router outlet any longer. To implement this change, I made adjustments to my app-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: 'roles',
        component: RolesComponent,
      },
      {
        path: 'workgroups',
        children: [
          {
            path: 'savewg',
            component: WgDetailsComponent,
          },
          {
            path: '',
            component: WorkgroupsComponent,
          },
        ],
      },
      {
        path: 'users',
        component: UsersComponent,
      },
    ],
  },
];

By including an empty path as a child in the workgroups component, I've attained a viable workaround for now. Nevertheless, I remain open to discovering additional methods and solutions.

Answer 4

After some exploration, I came across a more efficient solution for this issue. It appears that Angular automatically interprets the empty path route as the default route, eliminating the need to concern ourselves with router outlet any longer. To implement this change, I made adjustments to my app-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: 'roles',
        component: RolesComponent,
      },
      {
        path: 'workgroups',
        children: [
          {
            path: 'savewg',
            component: WgDetailsComponent,
          },
          {
            path: '',
            component: WorkgroupsComponent,
          },
        ],
      },
      {
        path: 'users',
        component: UsersComponent,
      },
    ],
  },
];

By including an empty path as a child in the workgroups component, I've attained a viable workaround for now. Nevertheless, I remain open to discovering additional methods and solutions.

How can I display a two-level nested component in Angular using the `router-outlet` feature?

Answer №1

app-routing.module.ts

workgroups-routing.module.ts

workgroups.module.ts

Answer №2

Similar questions

Ways to calculate the total number of keys within a JSON object at a certain level

In the XHTML mode, MathOverflow's invaluable mathematical expertise shines brightly

Refreshing a Next.js website on-demand using the Django model's save function

JavaScript - Saving an array of objects to an .xlsx file with various header rows that are merged

Could someone assist me in resolving the issue of receiving empty emails from my online form submission?

What is the best way to iterate through a JSON associative array using JavaScript?

The correct method for handling arrays with overlapping types and narrowing them down again

What is the best way to retrieve selected text in an editor from an external source?

What is the best method for efficiently loading SVG icons on an HTML page without redundancy? / Is utilizing <use href> recommended?

Conceal a Component within an Embedded Frame

What's the reason behind JavaScript's Every method not functioning properly?

Verifying credentials using Chromium pop-up window with Playwright

The issue is that the JavaScript output is not being displayed after submitting the HTML

Tips for Creating an Upward-Dropping Dropdown Menu in HTML/JavaScript When Space is Limited on the Page

Establishing a path for a post request in a Node.js application

Activate a jQuery collapsible feature through an external hyperlink

Keeping Record of Assurances

What could be causing my createElement to double in reactjs useEffect()?

Obtain additional information to address concerns related to onZoom and onPan issues on the line

Error encountered when initializing a variable within the constructor of a TypeScript file in Angular 4