CODEWITHSUNDEEP
angularangular-routingangular-routerrouterlinkactive
Aakriti.G
Aakriti.G

Reputation: 686

RouterLinkActive is not set after reloading a page

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.

Upvotes: 2

Views: 2656

Answers (2)

Prasanth S
Prasanth S

Reputation: 535

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>

Upvotes: 1

Chandru
Chandru

Reputation: 11184

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>

Upvotes: 1

Related Questions