Friday, April 12, 2024
Angular 8Javascript

Angular 8 routing working example

Angular 9, Angular 10

Hello to all, welcome to In this post, I will tell you, Angular 8 routing working example.

If you are new in Angular then you can also check my old post related to Angular 8  and Angular 7.

Here is the complete code and please use this carefully:

1. Let start, here are the basics commands to set Angular 8 into your pc:

$ npm install -g @angular/cli //Setup Angular8 atmosphere

$ ng new angularlatest8 //Install New Angular App

/**You need to update your Nodejs also for this verison**/

$ cd angularlatest8 //Go inside the Angular 8 Project

2. After Install Angular 8 fresh setup and go inside the Angular 8 setup, run below command into your terminal for creating new angular components:

ng g component aboutus

ng g component contactus

3. After done with above commands and angular 8 setup and add below code into app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Routes, RouterModule } from '@angular/router';
import { AboutusComponent } from './aboutus/aboutus.component';
import { ContactusComponent } from './contactus/contactus.component';

const appRoutes: Routes = [
    { path: 'aboutus', component: AboutusComponent },
  { path: 'contactus', component: ContactusComponent }

  declarations: [
  imports: [
      { enableTracing: true } // <-- debugging purposes only
  entryComponents: [AppComponent],
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

4. Now add below code into app.component.html file:

<nav class="navbar navbar-expand-sm bg-light">
  <ul class="nav nav-pills">
      <li class="nav-item"><a class="nav-link" routerLinkActive="home" [routerLinkActiveOptions]="{exact: true}" routerLink="/">Home</a></li>
      <li class="nav-item"><a class="nav-link"  routerLinkActive="aboutus" [routerLinkActiveOptions]="{exact: true}" routerLink="/aboutus">About Us</a></li>
      <li class="nav-item"><a class="nav-link"  routerLinkActive="contactus" [routerLinkActiveOptions]="{exact: true}" routerLink="/contactus">Contact Us</a></li>

<div class="container-fluid">

5. Finally add below code into app.component.css file:

.nav-pills{margin: 0;padding: 25px 0 42px;background: #eee;}
.nav-pills li{float: left;margin: 0 0 0px 38px;list-style-type: none;}
.container-fluid{background: #eee;padding: 20px 30px;}

In the end, don’t forget to run ng serve command to see final working output.

If you have any query then please comment below.

Jassa Jatt

Thank you

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.