Routing in Child component

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>RoutingMenu</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeComponent } from './employee/employee.component';
import { DepartmentComponent } from './department/department.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found.component';
import { AddEmpComponent } from './employee/add-emp.component';
import { UpdateEmpComponent } from './employee/update-emp.component';
import { DeleteEmpComponent } from './employee/delete-emp.component';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeComponent,
    DepartmentComponent,
    AboutComponent,
    NotFoundComponent,
    AddEmpComponent,
    UpdateEmpComponent,
    DeleteEmpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { DeleteEmpComponent } from './employee/delete-emp.component';
import { UpdateEmpComponent } from './employee/update-emp.component';
import { AddEmpComponent } from './employee/add-emp.component';
import { NotFoundComponent } from './not-found.component';
import { AboutComponent } from './about/about.component';
import { DepartmentComponent } from './department/department.component';
import { EmployeeComponent } from './employee/employee.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  {path: '', redirectTo: '/about', pathMatch: 'full'},
  {path: 'employee', component: EmployeeComponent,
  children: [
    {path: 'add', component: AddEmpComponent},
    {path: 'update', component: UpdateEmpComponent},
    {path: 'delete', component: DeleteEmpComponent},
  ]},
  {path: 'department', component: DepartmentComponent},
  {path: 'about', component: AboutComponent},
  {path: '**', component: NotFoundComponent}
];

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

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'RoutingMenu';
}

app.component.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="sidenav">
  <a routerLinkActive="active" routerLink="/employee">Employee</a>
  <a routerLinkActive="active" routerLink="/department">Department</a>
  <a routerLinkActive="active" routerLink="/about">About</a>
</div>

<div class="main">
  <router-outlet></router-outlet>
</div>

</body>
</html>

app.component.css

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #343a40;
  overflow-x: hidden;
  padding-top: 100px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 18px;
  color: #818181;
  display: block;
}
.sidenav a.active {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 150px; /* Same as the width of the sidenav */
  font-size: 18px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

about.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-about',
  template: `
    <p>
      about works!
    </p>
  `,
  styles: []
})
export class AboutComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

department.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-department',
  template: `
    <p>
      department works!
    </p>
  `,
  styles: []
})
export class DepartmentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

employee.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-employee',
  template: `
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="add">Add Employee</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="update">Update Employee</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="delete">Delete Employee</a>
      </li>
    </ul>
  </div>
  </nav>
  <router-outlet></router-outlet>
  `,
  styles: [`
    .navbar ul.navbar-nav{
      padding-left : 250px;
    }
    .navbar li.nav-item{
      padding-left : 40px;
    }
    .navbar a{
      cursor:pointer;
    }
  `]
})
export class EmployeeComponent implements OnInit {

  constructor(private router: Router, private activateRoute: ActivatedRoute) { }

  ngOnInit() {
  }
}

add-emp.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-add-emp',
  template: `
    <p>
      add-emp works!
    </p>
  `,
  styles: []
})
export class AddEmpComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

update-emp.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-update-emp',
  template: `
    <p>
      update-emp works!
    </p>
  `,
  styles: []
})
export class UpdateEmpComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

delete-emp.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-delete-emp',
  template: `
    <p>
      delete-emp works!
    </p>
  `,
  styles: []
})
export class DeleteEmpComponent implements OnInit {

  constructor() { }
  ngOnInit() {
  }
}

not-found.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-not-found',
  template: `
    <p>
      Page Not found
    </p>
  `,
  styles: []
})
export class NotFoundComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

Output

Share this:

Leave a Comment Cancel reply