04‐RouterLinkActive - zhamri/stiwk2124-Angular-Route GitHub Wiki

nav-bar.html

        <li class="nav-item">
          <a class="nav-link" routerLink="/login" routerLinkActive="menu-active">Login</a>
        </li>

nav-bar.ts

import {RouterLink, RouterLinkActive} from '@angular/router';

@Component({
  selector: 'app-nav-bar',
  imports: [RouterLink, RouterLinkActive],
  templateUrl: './nav-bar.html',
  styleUrl: './nav-bar.css'
})

nav-bar.css

.menu-active {
  font-weight: bold;
  color: darkblue !important;
  text-decoration: underline;
}

The !important is sometimes needed if Bootstrap styles (like .nav-link) override your custom style.

⚠️ GitHub.com Fallback ⚠️