Esta semana me he encontrado con la necesidad de añadir un anchor link dentro de una SPA Angular. La primera impresión fue ¿de verdad se necesita o se puede hacer con el routing de Angular? Pero tras analizarlo, realmente no necesitaba un nuevo componente al que se llamase con una ruta específica y se incluyese dentro de otro componente padre, sino que simplemente en un apartado de ese componente necesitaba insertar una referencia para que se pudiese navegar directamente a esa sección de la página.

La tarea la recordaba sencilla de cuando lo hacía con HTML a secas, si alguien no se acuerda de cómo se implementaba, lo explican muy bien aquí. Pero en este punto mi duda existencial fue ¿cómo se consigue eso en una aplicación Angular 6?

Si también te lo estás planteando estos son los tres sencillos pasos:

  1. En el archivo app.routing.ts donde configuras el enrutamiento de la aplicación hay que añadirle la configuración necesaria para que permita el scrolling.

2. Añadir un id=”tuId” al encabezado, sección o párrafo que quieres que sea el anchor.

3. Llamarlo desde cualquier lugar de la aplicación:

Y ya estaría, si se llama desde fuera de la aplicación al igual que con HTML, es simplemente href=”/mipaginaconAnchor#tuId”.

Así que finalmente era tan sencillo como recordaba, lo único tener en cuenta la configuración del enrutamiento.

Espero que esta publicación te haya sido útil. Si es así, por favor, dale un voto positivo y compártelo en tus redes sociales. Si lo deseas, puedes encontrarme en Twitter y en Linkedin.

Software Developer at Sngular. PhD on Immunology, always learning and trying to share knowledge. Microsoft Most Value Professional on Developer Technologies.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store