Angular 7 active route link loses his style?

Question

I am using Angular 7. I have problem with routerLinkActive. When i chose link in navbar, it gives .active class to link, but when i click somewhere else on page link loses his style, but in console active class is still active. So how to keep active class style on page link where i am located. I done this so many times and never had problem, tryed to copy working code but still no progress.

app.module.ts

import { RouterModule } from "@angular/router";
RouterModule.forRoot([
      {
        path: "",
        component: DashboardComponent,
        canActivate: [AuthGuardService]
      },
      { path: "login", component: LoginComponent },
      { path: "register", component: RegisterComponent },
      {
        path: "pacijent/:id",
        component: PacijentComponent,
        canActivate: [AuthGuardService]
      },

      {
        path: "pacijent/:id/edit",
        component: PacijentEditComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: "istorija/:id/:id",
        component: NalazComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: "obavestenja",
        component: ObavestenjaComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: "users/:id",
        component: ProfilComponent,
        canActivate: [AuthGuardService]
      },

      { path: "**", component: NotfoundComponent }
    ])

html

  <li *ngIf="isLoggedIn">
        <a
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }"
          routerLink=""
          ><i class="fas fa-home"></i> Glavna Strana</a
        >
      </li>
  <li *ngIf="isAdmin">
        <a
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }"
          routerLink="obavestenja"
          ><i class="fas fa-signal"></i> Statistika</a
        >
      </li>

css

.nav-right .nav li a:hover,
.nav-right .nav li a:focus {
  font-size: 24px;
  text-decoration: none;
  color: #0078ad;
  background: white;
}
.nav-right .nav li a .active {
  font-size: 24px;
  text-decoration: none;
  color: #0078ad;
  background: white;
}

If you use href attribute in anchor tag. It will reload the entire page whenever you click the link. remove href — Chellappan வ, Feb 24 '19 at 11:46

score 0 · Answer 1 · answered Feb 24 '19 at 12:34

0

Try using absolute paths

routerLink="/"
routerLink="/obavestenja"

answered Feb 24 '19 at 12:34

Harout

66
4

score 0 · Answer 2 · answered Feb 24 '19 at 15:48

0

.nav-right .nav li a.active {
  font-size: 24px;
  text-decoration: none;
  color: #0078ad;
  background: white;
}

I had space between a and .active Sorry for wasting time...

answered Feb 24 '19 at 15:48

Viktor Molnar

99
3
13

Angular 7 active route link loses his style?

2 Answers2