Créer un lien à l’intérieur d’une page Angular

Il arrive parfois qu’un lien ou un bouton nous mène vers une section de la page. La façon traditionnelle ne fonctionne pas sous Angular étant donné la gestion des routes à partir du fichier app-routing.module.ts.

en HTML pure, ceci fonctionne:

<a href="#accueil">Accueil</a>

<h1 #accueil>Accueil</h1>

Par contre dans Angular ça ne fonctionnera pas. Voici un workaround facile:

test.component.html

<a (click)="allerVersElement(accueil)">Accueil</a>

<h1 #accueil>Accueil</h1>

test.component.ts

allerVersElement($element): void {
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}

De cette façon on obtient le même résultat!