When you have multiple links in the top navigation bar of your app, it is important for the end user to be able to differentiate between the active link they have selected and inactive links. This differentiation can be achieved by showing the active link in a different color and style. In Angular, you can do this using an out-of-the-box directive called routerLinkActive.
In this guide, you will learn how to use the routerLinkActive directive to show the active link in a different color and style. You will create a demo app with a navigation bar with links to two routes of the application. To complete this guide, you must have the following:
ng new active-route-demo
The next step is to install Twitter Bootstrap and jQuery and reference them in the project.
cd active-route-demo
npm i jquery
npm i bootstrap
angular.json
.styles
array before src/style.css
."node_modules/bootstrap/dist/css/bootstrap.min.css",
scripts
array:"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
src > index.html
.class="container"
The final code should look like this:
1<body class="container">
2<app-root></app-root>
3</body>
Now the project is all set to develop the demo application.
In Visual Studio Code, open the file src > app > app.module.ts
, delete the contents of the file, and add the following code. This code imports Angular's router module and creates a routes array in which you will keep all your application routes.
1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4
5import { AppComponent } from './app.component';
6import { NavBarComponent } from './nav-bar/nav-bar.component';
7import {RouterModule, Routes} from '@angular/router';
8
9
10const routes: Routes = [
11];
12
13
14@NgModule({
15 declarations: [
16 AppComponent,
17 NavBarComponent
18 ],
19 imports: [
20 BrowserModule,
21 RouterModule.forRoot(routes)
22 ],
23 providers: [],
24 bootstrap: [AppComponent]
25})
26export class AppModule { }
ng generate component home
src > app > home > home.component.html
, delete the contents of the file, and add following code:1<h1>Home Component</h1>
2<pre>
3Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4Aliquam sem fringilla ut morbi tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit. Sed blandit libero volutpat sed cras ornare.
5Est lorem ipsum dolor sit amet consectetur adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget. Vulputate dignissim suspendisse in
6est ante in nibh mauris. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Faucibus in ornare quam viverra orci sagittis eu volutpat.
7Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Arcu dictum varius duis at consectetur lorem donec massa. Turpis egestas pretium aenean
8pharetra magna ac placerat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Faucibus scelerisque eleifend donec pretium. Vel turpis nunc
9eget lorem dolor sed viverra ipsum nunc. In fermentum et sollicitudin ac orci. Massa massa ultricies mi quis hendrerit dolor magna eget est. Sem integer vitae
10justo eget magna fermentum iaculis eu. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc consequat interdum varius sit amet mattis.
11</pre>
ng generate component about-us
src > app > about-us > about-us.component.html
, delete the contents of the file, and add the following code:1<h1>About Us</h1>
2<pre>
3Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4Aliquam sem fringilla ut morbi tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit. Sed blandit libero volutpat sed cras ornare.
5Est lorem ipsum dolor sit amet consectetur adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget. Vulputate dignissim suspendisse in
6est ante in nibh mauris. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Faucibus in ornare quam viverra orci sagittis eu volutpat.
7Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Arcu dictum varius duis at consectetur lorem donec massa. Turpis egestas pretium aenean
8pharetra magna ac placerat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Faucibus scelerisque eleifend donec pretium. Vel turpis nunc
9eget lorem dolor sed viverra ipsum nunc. In fermentum et sollicitudin ac orci. Massa massa ultricies mi quis hendrerit dolor magna eget est. Sem integer vitae
10justo eget magna fermentum iaculis eu. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc consequat interdum varius sit amet mattis.
11</pre>
src > app > app.module.ts
.1{path:'home', component: HomeComponent},
2{path:'about', component: AboutUsComponent}
In Visual Studio Code, open the file src > app > app.component.html
, delete existing content, and add the following code to add the router-outlet
component to the mix so that different routes are rendered in it.
1<app-nav-bar></app-nav-bar>
2<router-outlet></router-outlet>
You are now ready to run the RouterLinkActive directive.
ng serve
http://localhost:4200
.Congratulations!! You have learned how to use the routerLinkActive directive to show the active link to the user. For more information, please visit RouterLinkActive Directive.