Angular using another router outlet

Question

I created the main routes for my project and i have dashboard component as you can see below the dashboard

I need to use another routing system for this dashboard component. I have 20% of the screen that showing the sidebar and the other 80% the content so I need for every sidebar link to replace the content with another component just like the router-outlet

the code

<section>
<div class="sidebar">
    <a class="sidelink d-block p-3 second-font active">Products</a>
    <a class="sidelink d-block p-3 second-font">Brands</a>
    <a class="sidelink d-block p-3 second-font">Subscribtions</a>
    <a class="sidelink d-block p-3 second-font">Add User</a>
</div>

<div class="content">
    <!-- THE PLACE WHERE I NEED TO USE ROUTING SYSTEM -->
</div>

Ninii Ninii · Accepted Answer · 2021-08-24T11:32:47

EDIT: Load child component

You're on the right path, now what you need to do if not done already. Add the path and link it to your component, in your app-routing.module.ts like below:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddUserComponent } from './components/add-user/add-user.component';
import { BrandsComponent } from './components/brands/brands.component';
import { ProductsComponent } from './components/products/products.component';
import { SubscriptionsComponent } from './components/subscriptions/subscriptions.component';

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'products', component: ProductsComponent },
      { path: 'brands', component: BrandsComponent },
      { path: 'subscriptions', component: SubscriptionsComponent },
      { path: 'add-user', component: AddUserComponent },
    ],
  },
];

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

Then in your component template you just need to add routerlink that enable you to use the path you defined in the app-routing.module.ts.

Finally router-outlet will enable you, when click on a link, to go to the right component

<section>
    <div class="sidebar">
      <a class="sidelink d-block p-3 second-font" routerLink="/parent/products">Products</a>
      <a class="sidelink d-block p-3 second-font" routerLink="/parent/brands">Brands</a>
      <a class="sidelink d-block p-3 second-font" routerLink="/parent/subscriptions">Subscriptions</a>
      <a class="sidelink d-block p-3 second-font" routerLink="/parent/add-user">Add User</a>
    </div>
  
    <div class="content">
      <router-outlet></router-outlet>
    </div>
</section>

Moreover if you need to add a class to the active link, you should look routerLinkActive in angular

Angular using another router outlet

1 Answers