Cómo crear navegación en Angular con Router, RouterLink y Kendo UI

Cuando creamos una aplicación en Angular, funciona como una SPA (Single Page Application): una sola página con múltiples vistas que se ejecutan en el cliente. Pero, ¿cómo podemos navegar entre cada una de ellas sin hacer una nueva petición al servidor?

El router de Angular se encarga de actualizar la barra de direcciones y cargar vistas o páginas sin recargar el navegador, vinculando una URL con el componente correspondiente. Pero hace mucho más que solo cambiar la URL y mostrar componentes.

El router nos ayuda a pasar datos entre componentes, proteger vistas con guards, combinar o anidar rutas, facilitar la carga diferida (lazy loading) o manejar el estado de la aplicación.

Creo que la mejor forma de aprender cómo funciona el router es construyendo algo práctico y probándolo directamente. ¡Manos a la obra!

Configurar el proyecto

Antes de empezar, vamos a crear una aplicación usando la versión más reciente del Angular CLI:

ng new play-with-router

Entra al directorio play-with-router y ejecuta el comando ng serve.

Haz clic en el enlace que aparece en la terminal y verás listo nuestro entorno de pruebas para jugar con el router.

El Router

Como estamos trabajando con una aplicación standalone generada por Angular, nuestra app inicia en el archivo main.ts.

El archivo main.ts contiene la función bootstrapApplication, con el componente de inicio (en nuestro caso AppComponent) y el archivo de configuración app.config.ts:

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

El objeto appConfig incluye la sección providers, donde registramos las dependencias de nuestra aplicación. Aquí usamos la función provideRouter, la cual recibe el arreglo de rutas de la app junto con opciones adicionales si las necesitamos:

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

Por defecto, el CLI genera el archivo app.routes.ts con un arreglo routes vacío, listo para que declaremos nuestras rutas:

export const routes: Routes = [];

Antes de Angular 16, usábamos RouterModule para registrar y proveer las rutas, además de dar acceso a directivas, servicios y tipos.

Declarar rutas

Antes de declarar las rutas, necesitamos crear tres componentes (home, about y not-found) dentro del directorio pages usando el Angular CLI:

$ ng g c pages/home
CREATE src/app/pages/home/home.component.html (20 bytes)
CREATE src/app/pages/home/home.component.spec.ts (605 bytes)
CREATE src/app/pages/home/home.component.ts (239 bytes)
CREATE src/app/pages/home/home.component.scss (0 bytes)

Luego, abre el archivo app.routes.ts y define las primeras rutas en el arreglo routes. El objeto Route cuenta con varias propiedades, pero para este caso solo configuramos path y component:

Importa el componente de cada ruta. La propiedad path representa el segmento en la URL:

• path: '': La ruta principal, por ejemplo http://localhost:4200.
• path: 'about': La ruta de información, como http://localhost:4200/about-me.
• path: '**': Funciona como comodín (wildcard) para cualquier ruta no encontrada, como http://localhost:4200/otra-pagina.

El código final queda de la siguiente manera:

import { Routes } from '@angular/router';
import {HomeComponent} from "./pages/home/home.component";
import {AboutComponent} from "./pages/about-me/about-me.component";
import {NotFoundComponent} from "./pages/not-found/not-found.component";
 
export const routes: Routes = [
  {
    path:'',
    component: HomeComponent,
  },
  {
    path:'about',
    component: AboutComponent
  },
  {
    path: '**',
    component: NotFoundComponent
  }
];

Nota: Por defecto, el router de Angular usa la estrategia de coincidencia por prefijo (prefix), por lo que debemos ordenar las rutas de la más específica a la menos específica y dejar el comodín al final.

• prefix: Busca la ruta y prueba con las rutas hijas.
• full: Todos los segmentos deben coincidir exactamente con la ruta, omitiendo las hijas.

Puedes leer más sobre pathMatch.

Abre el archivo app.component.html, que contiene el HTML por defecto y un router-outlet. Borra el contenido inicial y agrega el siguiente fragmento:

<header>
  <h1>The Store</h1>
</header>
<section>
  <router-outlet />
</section>

Guarda los cambios y ejecuta ng serve -o para abrir el navegador en el servidor local. Para probar las rutas, escribe cada ruta en la barra de direcciones y verás cómo el router carga el componente correspondiente. Además, el comodín captura cualquier ruta incorrecta y la redirige al componente not-found.

Esto funciona bien, pero ¿qué pasa cuando queremos agregar subrutas dentro de about, como about/team o about/company? Aquí es donde entran las rutas hijas (children routes).

Rutas hijas (Children Routes)

Para crear estas nuevas rutas secundarias, generamos dos componentes más con el CLI: team y company dentro de about:

ng g c pages/about-me/company
ng g c pages/about-me/team

Luego, dentro del directorio about-me, crea el archivo about.route.ts para declarar estas rutas. La estructura es similar a la de app.routes, pero en este caso usamos un objeto con la propiedad children apuntando a las nuevas rutas about/team y about/company:

export const aboutRoutes: Route =
  {
    path:'about',
    component: AboutComponent,
    children: [
      {
        path: 'team',
        component: TeamComponent
      },
      {
        path: 'company',
        component: CompanyComponent
      }
    ]
  }

Ahora agrega <router-outlet /> dentro de about.component.html:

<p>about works!</p>
<router-outlet/>

Por último, importa aboutRoutes dentro del arreglo routes en app.routes.ts:

import { Routes } from '@angular/router';
import {HomeComponent} from "./pages/home/home.component";
import {NotFoundComponent} from "./pages/not-found/not-found.component";
import {aboutRoutes} from "./pages/about-me/about-me.routes";
 
export const routes: Routes = [
  {
    path:'',
    component: HomeComponent,
  },
 aboutRoutes,
  {
    path: '**',
    component: NotFoundComponent
  }
];

Guarda los cambios y navega a las nuevas URLs para comprobar que cargan correctamente.

Route Tokens

Hasta ahora definimos las rutas usando cadenas de texto fijas. Esto funciona, pero ¿qué pasa si necesitamos usar la misma ruta en varios lugares (como en la barra de navegación) y después decidimos cambiar home por start?

Tendríamos que modificar el string 'home' en todas partes. En lugar de escribir la ruta a mano una y otra vez, podemos declarar una constante con nuestros identificadores de ruta (route tokens).

Abre app.routes.ts y declara una constante con las rutas principales:

export const ROUTE_TOKENS = {
  HOME : 'home',
  ABOUT : 'about',
  COMPANY : 'company',
  TEAM : 'team'
}

Luego actualiza tanto app.routes.ts como about.route.ts para usar ROUTE_TOKENS.

Archivo app.routes.ts:

export const ROUTE_TOKENS = {
  HOME : 'home',
  ABOUT : 'about',
  COMPANY : 'company',
  TEAM : 'team'
}
 
export const routes: Routes = [
  {
    path:'',
    redirectTo: ROUTE_TOKENS.HOME,
    pathMatch: "full"
  },
  {
    path: ROUTE_TOKENS.HOME,
    component: HomeComponent,
  },
 aboutRoutes,
  {
    path: '**',
    component: NotFoundComponent
  }
];

Archivo about.route.ts:

import {Route} from "@angular/router";
import {AboutComponent} from "./about-me.component";
import {TeamComponent} from "./team/team.component";
import {CompanyComponent} from "./company/company.component";
import {ROUTE_TOKENS} from "../../app.routes";
 
export const aboutRoutes: Route =
  {
    path:ROUTE_TOKENS.ABOUT,
    component: AboutComponent,
    children: [
      {
        path: ROUTE_TOKENS.ABOUT,
        component: TeamComponent
      },
      {
        path: ROUTE_TOKENS.COMPANY,
        component: CompanyComponent
      }
    ]
  }

Con esta pequeña refactorización, podemos construir la navegación sin errores tipográficos y con la ventaja de actualizar las rutas desde un solo lugar. Con las rutas listas, el siguiente paso es construir el menú de navegación.

Crear la navegación

Ya tenemos configurado el router, pero ofrecer enlaces de navegación es mucho más cómodo que obligar al usuario a escribir la ruta en el navegador cada vez que quiere moverse.

Angular ofrece varias herramientas para crear una navegación sólida, principalmente a través de las directivas RouterLink y RouterLinkActive, además del servicio Router.

RouterLink

La directiva RouterLink conecta nuestros elementos HTML directamente con el router; solo debemos importarla en el arreglo imports del componente.

La directiva routerLink hace más que solo asignar una ruta fija: nos permite pasar parámetros, valores dinámicos o rutas relativas:

• "/": Ruta absoluta.
• "./": Relativa a la ruta activa actual.
• "": Sin barra, añade el segmento a la ruta activa actual.
• "../": Sube un nivel respecto a la ruta activa actual.

Puedes leer más en la documentación oficial sobre rutas relativas.

Crear el componente de navegación

Queremos un área visual que contenga todos los enlaces. La forma más limpia de hacerlo es creando un componente navigation. Para generarlo, usamos el Angular CLI:

ng g c components/navigation
CREATE src/app/components/navigation/navigation.component.html (26 bytes)
CREATE src/app/components/navigation/navigation.component.spec.ts (647 bytes)
CREATE src/app/components/navigation/navigation.component.ts (263 bytes)
CREATE src/app/components/navigation/navigation.component.scss (0 bytes)

Primero, importamos las directivas RouterLink, RouterLinkActive y la constante ROUTE_TOKENS en navigation.component.ts:

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { ROUTE_TOKENS } from '../../route-token';
 
@Component({
  selector: 'app-navigation',
  standalone: true,
  imports: [RouterLink, RouterLinkActive],
  templateUrl: './navigation.component.html',
  styleUrl: './navigation.component.scss',
})
export class NavigationComponent {
  public readonly navigation = ROUTE_TOKENS;
}

Abre el archivo navigation.component.html y arma la lista con <ul> y <li>, aplicando la directiva routerLink con los tokens HOME y ABOUT:

<ul>
  <li [routerLink]="navigation.HOME">Home</li>
  <li [routerLink]="navigation.ABOUT">About</li>
</ul>

También necesitamos agregar los enlaces a las páginas de empresa y equipo dentro de la página about. Primero, importa ROUTE_TOKENS en about.component.ts:

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
import { ROUTE_TOKENS } from '../../route-token';
 
@Component({
  selector: 'app-about',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  templateUrl: './about-me.component.html',
  styleUrl: './about-me.component.scss',
})
export class AboutComponent {
  protected readonly ROUTE_TOKENS = ROUTE_TOKENS;
}

Por último, agrega dos enlaces con la directiva routerLink apuntando a COMPANY y TEAM:

<p>about works!</p>
Thanks for interest in learn more about
  <a [routerLink]="[ROUTE_TOKENS.COMPANY]">
    Company
  </a> and our
  <a [routerLink]="[ROUTE_TOKENS.TEAM]">
    TEAM
  </a>
 
<router-outlet></router-outlet>

Guarda los cambios y ya tenemos navegación funcional en la app. 🎉

La navegación ya funciona sin necesidad de escribir rutas a mano. Sin embargo, visualmente se ve bastante simple. ¿Cómo podemos mejorar el diseño de la barra sin complicarnos con estilos desde cero? Vamos a integrar Kendo UI.

Construir la navegación con Kendo NavBar

Primero, instalamos Kendo UI Navigation usando schematics, ya que registra automáticamente todas las dependencias necesarias:

ng add @progress/kendo-angular-navigation

A mí me gusta mucho el fluent theme, así que lo instalo y configuro en angular.json:

npm install --save @progress/kendo-theme-fluent

Recuerda agregar font-family: "Segoe UI", sans-serif en styles.scss para usar Segoe UI como tipografía por defecto.

Importa NavigationModule en navigation.component.ts y luego abre navigation.component.html para actualizar la estructura.

Para configurar la barra de navegación, uso varios componentes del módulo:

• kendo-appbar: Contenedor principal de la barra con posición superior y tema oscuro.
• kendo-appbar-spacer: Espaciador entre elementos.
• kendo-appbar-section: Permite crear secciones separadas, una para el título y otra para los enlaces.

Para indicar visualmente qué ruta está activa, combinamos la directiva routerLinkActive con la clase CSS active-link: [routerLinkActive]="'active-link'".

El código final queda así:

<kendo-appbar position="top" themeColor="dark">
  <kendo-appbar-spacer width="20px"></kendo-appbar-spacer>
  <kendo-appbar-section>
    <h1 class="title">The Store</h1>
  </kendo-appbar-section>
  <kendo-appbar-spacer width="42px"></kendo-appbar-spacer>
  <kendo-appbar-section>
    <ul>
      <li
        [routerLinkActive]="'active-link'"
        [routerLink]="navigation.HOME">Home</li>
      <li
        [routerLinkActive]="'active-link'"
        [routerLink]="navigation.ABOUT">About</li>
    </ul>
  </kendo-appbar-section>
</kendo-appbar>

Agrega el siguiente bloque de estilos a navigation.component.scss para ajustar la lista ul y definir el color y grosor de fuente de la clase activa:

ul {
  margin: 0;
  display: flex;
  list-style-type: none;
  padding: 0;
  li {
    margin: 0 9px;
  }
  li:hover {
    cursor: pointer;
    color: #e87890;
    font-weight: bold;
  }
}
.active-link {
  color: #e87890;
  font-weight: bold;
}

Antes de terminar esta parte, agregamos algo de contenido en las páginas home y about para que no se vean vacías.

Archivo home.component.html:

<h2>Welcome to the Store!</h2>
<p>Discover quality products, unbeatable prices, and exceptional service.
  From fashion to electronics, we've got what you need. Shop with confidence and enjoy a hassle-free experience with us.
</p>

Archivo about.component.html:

<h2>About</h2>
 
<p>Welcome to our About page! At The Store, we're more than just an online store – we're a passionate team dedicated to
revolutionizing the way you shop. Our journey began with a simple idea: to create a platform where customers can discover
unique products from around the globe, all in one convenient location. With a focus on quality, innovation, and customer
satisfaction, we've built a brand that stands for excellence in every aspect of the shopping experience.</p>
<p>
 
<p>Behind The Store is a diverse and talented team committed to bringing our vision to life. From our dedicated customer
support specialists to our expert product curators, each member plays a crucial role in delivering the exceptional
service and selection that our customers know and love. Meet the faces behind the brand and learn more about our team.</p>

Guarda los cambios y verás la barra de navegación mejorada, con indicadores visuales según la ruta seleccionada. ¡Mucho mejor! 🎉

Tener este componente es muy útil porque los usuarios pueden hacer clic directamente. Pero, ¿qué ocurre cuando necesitamos navegar según ciertas condiciones, como después de aceptar términos y condiciones o al completar un formulario?

Para esos escenarios, Angular nos ofrece el servicio Router. Veamos cómo usarlo.

Navegación con Router Service

El servicio Router ofrece varias funciones útiles. Entre las más importantes están los métodos navigate y navigateByUrl, que nos permiten cambiar de ruta de forma programática desde el código:

• navigate: Funciona con rutas relativas y absolutas, y acepta el objeto NavigationExtras para pasar query params, estado o gestionar el historial del navegador.
• navigateByUrl: Solo admite rutas absolutas (como string o UrlTree), y acepta NavigationBehaviorOptions para el estado y el historial.

En nuestro ejemplo, vamos a usar navigate. Queremos que en el componente home, cuando el usuario acepte los términos, navegue automáticamente a la página about usando el servicio.

Abre home.component.ts e inyecta el router con la función inject. Luego crea el método acceptTerms: si el valor es true, ejecutamos this.router.navigate:

export class HomeComponent {
  readonly router = inject(Router);
  public acceptTerms(value: boolean) {
    if (value) {
      this.router.navigate([ROUTE_TOKENS.ABOUT]);
    }
  }
}

En el archivo home.component.html, agrega el siguiente código con una casilla de verificación (checkbox) vinculada al evento change del método acceptTerms:

<label>
  Do you want to see the about page ?
<input #accepterm type="checkbox" (change)="acceptTerms(accepterm.checked)" >
</label>

Guarda los cambios y comprueba cómo el usuario pasa de home a about en cuanto marca la casilla. 🥰

Resumen

En este artículo vimos cómo registrar rutas en una aplicación Angular moderna, facilitando la definición de caminos para los usuarios. Usamos las directivas routerLink y routerLinkActive para crear una navegación limpia entre componentes con retroalimentación visual del enlace activo.

También vimos cómo darle un diseño profesional a la barra de menú con Kendo UI Navigation y cómo controlar los cambios de página desde TypeScript usando el servicio Router.

• Código fuente en GitHub
• Documentación de Kendo UI Navigation