Angular 8Javascript

Angular 8 change active menu color during routing

Views

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

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

Positive SSL