Explicación: Rutas y navegación

1. Explicación

Explicación del tema

2. Crear el proyecto

ng new routing --style=css
cd routing
ng serve

3. Crear los componentes

ng g c pages/inicio --standalone --skip-tests
ng g c pages/productos --standalone --skip-tests
ng g c pages/producto-detalle --standalone --skip-tests
ng g c pages/pagina404 --standalone --skip-tests

Y renombramos todas las clases con la indicación de que es un Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-inicio',
  imports: [],
  templateUrl: './inicio.html',
  styleUrl: './inicio.css',
})
export class InicioComponent {

}

4. Definir las rutas

src/app/app.routes.ts

import { Routes } from '@angular/router';

export const routes: Routes = [];

Añadimos las rutas, pero claro... no hay componentes todavía, nos vamos a todas la páginas y renombramos con componentes

import { Routes } from '@angular/router';
import { InicioComponent } from './pages/inicio/inicio';
import { ProductosComponent } from './pages/productos/productos';
import { Pagina404Component } from './pages/pagina404/pagina404';

export const routes: Routes = [
  // 1) Al entrar en /, redirige a /inicio
  { path: '', redirectTo: 'inicio', pathMatch: 'full' },

  // 2) Rutas normales
  { path: 'inicio', component: InicioComponent },
  { path: 'productos', component: ProductosComponent },

  // 3) Ruta con parámetro
  { path: 'producto/:id', component: ProductoDetalleComponent },

  // 4) Ruta comodín (siempre al final)
  { path: '**', component: Pagina404Component }
];

5. RouterOutlet

app.html

<h1>Routing funcionando</h1>
<p>Prueba: /inicio y /productos</p>

<router-outlet />

inicio.html

<h2>Página Inicio</h2>

producto.html

<h2>Página Productos</h2>

404.html

<h2>Error 404</h2>
<p>Página no encontrada</p>

6. RouterLink

src/app/app.ts, metemos el RouterLink

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

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

app.html

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

<router-outlet />

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;
}

8. productoDetalle

app.routes.ts

import { Routes } from '@angular/router';
import { InicioComponent } from './pages/inicio/inicio';
import { ProductosComponent } from './pages/productos/productos';
import { Pagina404Component } from './pages/pagina404/pagina404';
import { ProductoDetalleComponent } from './pages/producto-detalle/producto-detalle';

export const routes: Routes = [
  { path: '', redirectTo: 'inicio', pathMatch: 'full' },
  { path: 'inicio', component: InicioComponent },
  { path: 'productos', component: ProductosComponent },
  { path: 'producto/:id', component: ProductoDetalleComponent },
  { path: '**', component: Pagina404Component },
];

productos.ts

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-productos',
  imports: [RouterLink],
  templateUrl: './productos.html',
  styleUrl: './productos.css',
})
export class ProductosComponent {
  productos = [
    { id: 1, nombre: 'Portátil' },
    { id: 2, nombre: 'Monitor' },
    { id: 3, nombre: 'Teclado' },
  ];
}

productos.html

<h2>Página Productos</h2>

<ul>
  @for (p of productos; track p.id) {
    <li>
      {{ p.nombre }}
      -
      <a [routerLink]="['/producto', p.id]">Ver (id={{ p.id }})</a>
    </li>
  }
</ul>

productoDetalle.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-producto-detalle',
  imports: [],
  templateUrl: './producto-detalle.html',
  styleUrl: './producto-detalle.css',
})
export class ProductoDetalleComponent {

}

(Mirar funcionamiento )Añadimos una inyección 

import { Component, inject } from '@angular/core';
import { ActivatedRoute, RouterEvent, RouterLink } from '@angular/router';

@Component({
  selector: 'app-producto-detalle',
  imports: [RouterLink],
  templateUrl: './producto-detalle.html',
  styleUrl: './producto-detalle.css',
})
export class ProductoDetalleComponent {
  private route = inject(ActivatedRoute);

  id = this.route.snapshot.paramMap.get('id');
}

productosDetalle.html

<h2>Detalle del producto</h2>

<p>ID recibido por URL: <strong>{{ id }}</strong></p>

<a routerLink="/productos">(Atrás) Volver a productos</a>