How to route to the child components in Angular

Step 1. Adjust the parent module routing file to declare the parent component and its children.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './component/home/home.component';
import { RoleComponent } from './component/role/role.component';
import { LayoutComponent } from './component/layout/layout.component';
import { LoginComponent } from './component/login/login.component';
const routes: Routes = [
  {
    path: 'manager',
    component: LayoutComponent,
    children :[
      {
        path: '',
        component: HomeComponent
      },
 
      {
        path: 'role',
        component: RoleComponent
      },
      {
        path: "role/:path",
        component: RoleComponent
      }
    ]
  },
  {
    path :'login',
    component : LoginComponent
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 2. Add the router-outlet tag in your parent component template app.component.html

<div class="container-full">
 
    <router-outlet></router-outlet>
</div>

Step 3. Add the router-outlet tag in your parent component template layout.component.html

<div class="container-full">
  <app-header></app-header>
  <div class="content">
      <router-outlet></router-outlet>
  </div>

  <app-footer></app-footer>
</div>