Angular : comment créer un bouton pour passer sur une autre page
Comme tous les frameworks, Angular possède sa propre logique de fonctionnement. La navigation entre les pages d'un site internet n'est pas gérée de la même manière que dans un site développé avec d'autres outils.
L'attribut "routerLink" est utilisé par le framework pour générer les liens permettant de naviguer vers une nouvelle page. Il est lié à la balise <a>. La navigation dans le framework s'effectuant plutôt avec la balise <button>, vous devez intégrer le bouton à l'intérieur du lien.
<a routerLink="/urlVersLaNouvellePage"><button class="btn">Nouvelle page</button></a>
Depuis la version 4 du framework, l'attribut "routerLink" peut être utilisé avec la balise <button>. Il n'est donc plus nécessaire d'ajouter une balise <a>, ce qui simplifie l'écriture.
<button routerLink="/urlVersLaNouvellePage" class="btn">Nouvelle page</button>
Une autre solution consiste à utiliser les méthodes du module "router". Ce module gère la navigation de l'internaute entre les différentes pages de l'application. Pour l'utiliser, il faut le déclarer en paramètre du constructeur de son service après l'avoir importé.
import { Router } from '@angular/router';
constructor(private router: Router) {
…
}
Dans votre page, ajoutez une fonction sur le clic de votre bouton. On utilise pour cela l'attribut "(click)". Dans votre fonction, vous pouvez appeler la fonction "navigate()" en nommant le nouvel attribut "router". Il suffit d'indiquer en paramètre l'URL de la page vers laquelle on redirige l'utilisateur.
<button type="button" class="btn" (click)="changementDePage();">Nouvelle Page</button>
import { Router } from '@angular/router';
changementDePage = function () {
this.router.navigate(['/urlVersLaNouvellePage']);
};