Angular 8 Child Routing Working Example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 Child Routing Working Example.

If you are new then you can check my old posts related to Angular 8.

Post Working

In this post, I am showing, how child routes work. I have used Bootstrap 4 for navigation. In this post, you will see, how child routing and child component data will be shown and how child and parent will connect.

Here are the working code snippets and please follow carefully:

1. Very first, you need to run common below commands to add Angular 8 project on your machine:

$ npm install -g @angular/cli 

$ ng new angularselect2 //Install Angular Project

$ cd angularselect2 // Go to project folder

$ ng serve //Run Project

http://localhost:4200/ //Run On local server

2. Now you need to run below commands to add bootstrap 4 and jquery into your Angular application:

npm install ngx-bootstrap bootstrap --save

npm install jquery --save

3. Now add below code into your angular.json file:

"styles": ["src/styles.css","node_modules/bootstrap/dist/css/bootstrap.min.css",],
"scripts": ["node_modules/jquery/dist/jquery.js","node_modules/bootstrap/dist/js/bootstrap.js"]

4. Now run below commands into your terminal to add components and child components into your angular 8 application:

ng g component aboutus

ng g component users

//child components

ng g component users/newuser

ng g component users/edituser

5. Now you need to add below code into your src/app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AboutusComponent } from './aboutus/aboutus.component';
import { UsersComponent } from './users/users.component';
import { NewuserComponent } from './users/newuser/newuser.component';
import { EdituserComponent } from './users/edituser/edituser.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: 'aboutus', component: AboutusComponent },
  { path: 'users', component: UsersComponent,
    children: [
      {
        path: 'newuser',
        component: NewuserComponent
      },
      {
        path: 'edituser',
        component: EdituserComponent
      }
    ]
  },
];


@NgModule({
  declarations: [
    AppComponent,
    AboutusComponent,
    UsersComponent,
    NewuserComponent,
    EdituserComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, 
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6. Now you need to add below code into src/app/app.component.html file:

<div class="jumbotron text-center">
  <h1>Angular 8 Child Routing Working Example</h1>
</div>
<nav class="navbar nav navbar-expand-sm bg-light">
  <ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link" routerLink="/aboutus">About Us</a></li>
  
  
  <li class="dropdown">
        <a class="dropdown-toggle nav-link" data-toggle="dropdown" routerLink="/users">Users
        <span class="caret"></span></a>
        <div class="dropdown-menu">
          <a class="dropdown-item"  routerLink="/users/newuser">Add User</a>
          <a class="dropdown-item"  routerLink="/users/edituser">Edit User</a>
        </div>
      </li>

  </ul>
</nav>
<br>

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

</div>

6. Now you need to add below code into src/app/users/users.component.html file:

<p>
  users works!
</p>
<router-outlet></router-outlet>

In the end, don’t forgot to run ng serve command. If you have any query then do comment below.

Jassa

Thank you.