CODEWITHSUNDEEP
angularangular-router
Victor Aurélio
Victor Aurélio

Reputation: 2565

RouterLinkActive on children routes all false

I've the following children routes:

{ path: '', component: LoginSingupComponent,
  children: [
    { path: 'login', component: LoginComponent },
    { path: 'singup', component: SingupComponent },
  ]
},

Navigating to /login or /singup works ok (correct Component is loaded).

This is a excerpt from LoginSingupComponent

<nav md-tab-nav-bar class="mb-1">
  <a md-tab-link routerLink="/login" routerLinkActive [routerLinkActiveOptions]="{exact: true}" #rla="routerLinkActive" [active]="rla.isActive">Entrar {{rla.isActive}}</a>
  <a md-tab-link routerLink="/singup" routerLinkActive [routerLinkActiveOptions]="{exact: true}" #rla="routerLinkActive" [active]="rla.isActive">Criar uma conta{{rla.isActive}}</a>
</nav>

When on /login all rla.isActive == false when on /singup all rla.isActive == true

Tried with and without exact: true

Upvotes: 11

Views: 16834

Answers (2)

Victor Aur&#233;lio
Victor Aur&#233;lio

Reputation: 2565

Found the problem.

It's was because i was exporting both rounterLinkActive with same variable name which causes this weired behavior.

<a md-tab-link routerLink="/auth/login" routerLinkActive [active]="rlal.isActive" #rlal="routerLinkActive">Entrar {{rlal.isActive}}</a>
<a md-tab-link routerLink="/auth/singup" routerLinkActive [active]="rlas.isActive" #rlas="routerLinkActive">Criar uma conta{{rlas.isActive}}</a>

Solves the problem.

Upvotes: 5

Chandru
Chandru

Reputation: 11192

Try like this :

<nav md-tab-nav-bar class="mb-1">
    <a md-tab-link [routerLink]="['/']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
    <a md-tab-link [routerLink]="['/login']" routerLinkActive="active">Login</a>
    <a md-tab-link [routerLink]="['/singup']" routerLinkActive="active">Signup</a>
</nav>

Upvotes: 16

Related Questions