Angular 8 change active menu color during routing

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 change active menu color during routing.

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

In this post, Angular 8 Routing will also be covered.

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 }
];

@NgModule({
  declarations: [
    AppComponent,
    AboutusComponent,
    ContactusComponent
  ],
  imports: [
    BrowserModule,
  BrowserAnimationsModule, 
    RouterModule.forRoot(
      appRoutes,
      { 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>
  </ul>
</nav>
<br>

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

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;}
.home{color:red!important}
.aboutus{color:yellow!important}
.contactus{color:green!important}

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