Home Angular 8 Angular 8 change active menu color during routing

Angular 8 change active menu color during routing

by therichpost
Published: Last Updated on 2 comments
Angular 9, Angular 10

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

You may also like

2 comments

Julien Pitt December 24, 2019 - 4:51 am

Great and it helped me a lot

Reply
gustavo April 16, 2020 - 2:22 am

Isso não funcionar

Reply

Leave a Comment

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