Nelle pagine web è ormai consuetudine inserire molti anchor tag, i quali fungono come puntatori a una specifica parte della pagina, per facilitarne la navigazione suddividendola in paragrafi o aree tematiche. Ma come è possibile ottenere lo stesso effetto all'interno di un framework come Angular nel quale la navigazione è gestita dal RouterModule?

Come primo step dobbiamo abilitare queste opzioni nel momento in cui inseriamo il modulo tra gli imports.

const options: ExtraOptions = {
  // permette al sistema di ricordare la posizione della pagina al momento della navigazione
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled',
  // specifico uno spazio di offset a seguito della navigazione
  scrollOffset: [0, 30],
};

[...]

imports: [
    [...],
    RouterModule.forRoot(routes, routerOptions)
]

Con questo setup si potranno generare degli anchor interattivi, che a seguito di un click permetteranno alla pagina di muoversi alla sezione corrispondente.

<a [routerLink]="" [fragment]="sezione-a">{{link}}</a>[...]

<div class="section" id="sezione-a">

Operazione possibile anche utilizzando il metodo navigate dell'istanza Router

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

constructor(private router: Router){}
navigate(){
    this.router.navigate(['/'], { fragment: 'sezione-a' });
}