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:

See the gist on github.

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:

See the gist on github.

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:

See the gist on github.