Styling Active Links in Angular
You can make links whose URL matches the address bar stand out with some style, for example, color. Angular has a special attribute for this, RouterLinkActive.
Let's see how it works. First, let's import it:
import { RouterLinkActive } from '@angular/router';
Let's write it in the decorator:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
Now let's add this attribute to our links:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
As you can see, in our example the attribute value is active. This is the name of the CSS class that will be given to the active link. Now we can style them as we wish:
.active {
color: red;
}
Style active links in your project.
