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.
Recent Comments