7. RouterLinkActive

Resaltar ruta activa, incluimos 

import { Component, signal } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet,RouterLink,RouterLinkActive],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('routing');
}

app.html

<h1>Routing funcionando</h1>
<nav>
  <a routerLink="/inicio" routerLinkActive="activo">Inicio</a> |
  <a routerLink="/productos" routerLinkActive="activo">Productos</a>
</nav>

<router-outlet />

app.css

.activo {
  color: #DD0031;
  font-weight: 700;
  border-bottom: 2px solid #DD0031;
}