En este post te mostraré cómo navegar a otra ruta en una SPA de Angular usando TypeScript. Es decir, navegar en el click de un botón o en determinada acción, y no a través de un enlace.

Lo único que tenemos que hacer es importar al router, inyectarlo en el constructor y después invocar a navigateByUrl (igualmente el router tiene más métodos).

Paso 1: importar el router

En el componente en donde quieres navegar a otra ruta con Angular coloca:

import {Router} from "@angular/router";

Paso 2: inyectarlo en el constructor

Ahora indica que quieres usar el router dentro del constructor de tu componente:

  constructor(private router: Router) {
  }

 

Paso 3: navegar a otra ruta

Finalmente, en cualquier método de tu constructor invoca al método navigateByUrl. Por ejemplo, yo tengo el siguiente método:

navegarAFormulario() {
  this.router.navigateByUrl("/productos/agregar");
}

Recuerda que estás navegando por URL, es decir, debes indicar la ruta a la que quieres navegar. En este caso yo invoco a ese método desde un botón que usa Angular Material:

<button (click)="navegarAFormulario()" mat-button color="accent" mat-raised-button>Agregar producto</button>
Si el post ha sido de tu agrado te invito a que me sigas para saber cuando haya escrito un nuevo post, haya actualizado algún sistema o publicado un nuevo software. Facebook | X | Instagram | Telegram | También estoy a tus órdenes para cualquier contratación en mi página de contacto