Angular: routerLinkActive does not work properly

Asked Jul 19 '19 at 22:00

Active Jul 19 '19 at 22:00

Viewed 118 times

I have two simple pages: Home and About. I also have a menu array in my AppComponent:

menu = [
  {path: '', title: 'Home'},
  {path: 'about', title: 'About'}
];

Styles:

.active {
  color: red;
}

.blue {
  color: blue;
}

And View:

<ul>
  <li *ngFor="let item of menu" [routerLink]="item.path" routerLinkActive="active"
      [routerLinkActiveOptions]="{exact: true}">
    <span routerLinkActive="blue">+</span>{{item.title}}
  </li>
</ul>
<router-outlet></router-outlet>

When I'm navigating to the pages, I want link become red and plus sign become blue. But when I'm on the About page, Home link's plus sign is also blue:

What can I do? I cannot style plus sign in other way, only with routerLinkActive (in my real project everything is much more complicated).

asked Jul 19 '19 at 22:00

Boris

4,944
7
36
69

1

You used routerLinkActiveOptions on one, but not on the other. – JB Nizet Jul 19 '19 at 22:04
Why not just use css. `li.active span` – penleychan Jul 19 '19 at 22:05
@JbNizet, yes, my bad. Now all works. Thank you so much! – Boris Jul 19 '19 at 22:06
You should definitely follow penleychan's advice. – JB Nizet Jul 19 '19 at 22:07
@JbNizet, I use Font Awesome icons (SVG). I cannot style them in that way. See https://stackoverflow.com/questions/56828270/angular-with-fontawesome-cannot-style-path – Boris Jul 19 '19 at 22:09
Regarding to that question link, you can actually. You need to use `ng-deep` – penleychan Jul 19 '19 at 22:12
@penleychan, I will definitely try. Thank you! – Boris Jul 19 '19 at 22:31

Angular: routerLinkActive does not work properly

0 Answers0