Parul

Styling Links with routerLinkActive in Angular

Parul

Jun 26, 2020
9 Min read
6,605 Views

Jun 26, 2020
9 Min read
6,605 Views

Languages Frameworks and Tools

Front End Web Developer

Client-side Frameworks

Angular

Introduction

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:

Node - 12.17.0

Angular CLI - 9.0.2

Visual Studio Code - 1.45.1

Getting Started

Create an Angular Project

Execute the following command to create an Angular project.

ng new active-route-demo

When prompted to add routing to the application press 'N'.

When prompted to choose stylesheet format press 'ENTER'.

Opening the Generated Application in Visual Studio Code

Click on the File menu in the top menu bar and select the menu option Open Folder.

In the file dialog box, navigate to the folder where you generated the application.

In this folder, you should see a folder named active-route-demo. Select this folder and click Open in the file dialog box.

Setting Up the Project

The next step is to install Twitter Bootstrap and jQuery and reference them in the project.

Go to command prompt and run following command:

cd active-route-demo

Run the following command to install jquery:

npm i jquery

Run the following command to install Bootstrap:

npm i bootstrap

In Visual Studio Code, open the file angular.json.

Add the following line in the styles array before src/style.css.

"node_modules/bootstrap/dist/css/bootstrap.min.css",

Add the following lines in the scripts array:

"node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"

In Visual Studio Code, open the file src > index.html.

At line number 10, in the body element, add the following class:

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.

Setting up the Routing

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 { }

Developing the Home Component

Run the following command in the command prompt:

ng generate component home

In Visual Studio Code, open the file 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>

Developing the About Us Component

Run the following command in the command prompt:

ng generate component about-us

In Visual Studio Code, open the file 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>

Developing the Navigation Bar

Run the following command in the command prompt:

ng generate component nav-bar

In Visual Studio Code, open the file src > app > nav-bar > nav-bar.component.html, delete the contents of the file, and add the following code. In this code, notice that the routerLinkActive directive is applied on the anchor tag. This directive takes a CSS class as a parameter, which renders the link in a different color and style. Also notice the property routerLinkActiveOptions. This property ensures that the route is shown in a different color only when the route completely matches the routes that you declared in the app.module.ts file earlier.

1<nav class="navbar navbar-expand-sm bg-dark">
2    <ul class="nav navbar-nav">
3        <li class="nav-item">
4            <a class="nav-link" href="#">Router Outlet Demo</a>
5        </li>
6        <li class="nav-item">
7            <a [routerLink]="['/home']" class="nav-link" routerLinkActive="active"
8                [routerLinkActiveOptions]="{exact:true}">Home</a>
9        </li>
10        <li class="nav-item">
11            <a class="nav-link" [routerLink]="['/about']" routerLinkActive="active">About</a>
12        </li>
13    </ul>
14</nav>

In Visual Studio Code, open the file src > app > nav-bar > nav-bar.component.css and add the following code:

1li > a.active { color: #F97924 }

Setting up the Routes

In Visual Studio Code, open the file src > app > app.module.ts.

In the routes array, add the following entries:

1{path:'home', component: HomeComponent},
2{path:'about', component: AboutUsComponent}

Using the router-outlet Component

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>

Testing the Application

You are now ready to run the RouterLinkActive directive.

Run the following command in the command prompt to start Angular Development Server in watch mode:

ng serve

If prompted to share Angular CLI usage data, press the 'N' key to not share it.

Open a browser and type the following URL in the address bar to launch the application: http://localhost:4200.

Notice that there are two links in the navigation bar: Home and About.

Click on the About link and notice the display below the navigation bar changes, showing the HTML of the About-us component.

Click back on the Home link and notice the display below the navigation bar changes, showing the HTML of the Home component.

Conclusion

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.

LEARN MORE