2

I am working with routing and navigation. I am using [routerLinkActive]="['active']" to make a link active. It works fine when I navigate to other route.

But when current page is refreshed, 'routerLinkActive' is not working and no link is active. I need to select that link to make it active again. Is there any way to make that link active once page is reloaded.

sample:

app-routing.ts

   {
    path: 'home', 
    children: [
      {path: 'product', component: ProductComponent},
      {path: 'dualList', component: DualListComponent},
      {path: 'member', component: MemberComponent},
      {path: '', component: HomeComponent}
    ]
  },
  {path: 'about', component: AboutComponent}

home.component.html

  <a [routerLink] = "['/home', 'product']" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Product</a>
  <a [routerLink] = "['/home', 'dualList']" routerLinkActive="active">Dual List</a>
  <a style="padding-left: 20px" [routerLink] = "['/home', 'member']" routerLinkActive="active">Member</a>

Any help would be appreciated.

Aakriti.G
  • 656
  • 1
  • 10
  • 26

2 Answers2

1

try like this :

You can set routerLinkActiveOptions only for home page url :

<ul>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
        <a routerLink="/">Home</a>
    </li>
    <li routerLinkActive="active">
      <a [routerLink]="['home/product']">Product</a>
    </li>
    <li routerLinkActive="active">
      <a [routerLink]="['home/dualList']">Dual List</a>
    </li>
    <li routerLinkActive="active">
      <a [routerLink]="['home/member']">Member</a>
    </li>
</ul>
Chandru
  • 10,864
  • 6
  • 38
  • 53
  • @Aakriti add routerLink like [routerLink]="['home/product']" and i have edited answer please check it and try like this – Chandru Nov 23 '17 at 09:46
1

Try this hope it will work, i think you are not aware of Renderer read this:

in home.component.ts (relates with home.component.html)

import {Renderer} from '@angular/core';

export class homeComponent {
 userTypeSelect(event:any){
    event.preventDefault()
    this.render.setElementClass(event.target,"active",false);
  }

  constructor(private render:Renderer) {
  }
}

home.component.html

<li role="presentation" (click)="userTypeSelect($event)" [routerLinkActive]="['active']">
   <a routerLink="/product">Product page</a>
</li>
Prasanth S
  • 525
  • 5
  • 19