You can easily show the user which route they are on using Angular 2’s routerLinkActive
. Whenever a route matches the routerLink
defined on the element, then the routerLInkActive
will add the class that you assign it to.
app.component.ts:
import {Component} from '@angular/core'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
app.component.css:
a{
text-decoration: none;
} a.active{
font-weight: bold;
color: darkred;
}
app.component.html:
<nav>
<a [routerLink]="''"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact: true}">Home</a>
<a
[routerLink]="'contact'"
routerLinkActive="active"
>Contact</a>
</nav>
<router-outlet></router-outlet>