Aller au contenu principal

8-9 Liens de navigation

Nous avons vu comment faire un lien vers une autre page à l'aide du routerLink et de RouterOutlet. De plus, nous pouvons utiliser les concepts appris dans le but d'ajouter un lien dans la barre de navigation.

Il serait bien de pouvoir contrôler le style d'un lien lorsque ce dernier est actif et lorsqu'il ne l'est pas.

Ajouter un lien Projets à la navbar​

Bien que la page d'accueil soit en quelque sorte la page des projets, ne laissons pas place à l'ambiguïté et ajoutons un lien vers la page Projets. De plus, si jamais l'application devait à avoir d'autres éléments de navigation, il serait logique d'avoir un lien "Projets" permettant de revenir à la liste de tous les projets.

src/app/shared/components/navbar.ts
@Component({
  selector: 'app-navbar',
  imports: [
    RouterLink
  ],
  template: `
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark border-bottom mb-4">
      <div class="container-fluid">
        <a class="navbar-brand" routerLink="">Houdini</a>
        <div class="collapse navbar-collapse" id="navbarMain">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a class="nav-link" routerLink="/projets">Projets</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  `,
  styles: ``
})
info

Nous n'avions pas de bloc de navigation et liste d'items de menu, c'est pourquoi un div contenant une liste navbar-nav a été ajouté.

Les classes de menu sont celles suggérées par la documentation de Bootstrap.

Lien de menu active​

Bootstrap offre une classe active qu'il est possible de mettre sur un lien nav-link afin de lui donner le style de lien actif.

Or, en ce moment, le lien "Projets" sur la page d'accueil est grisé alors qu'il devrait être en surbrillance (puisqu'on est sur la page de liste de projets!)

http://localhost:4200

Il devrait en effet plus avoir l'air de ceci:

http://localhost:4200

Utilisation de la directive routerLinkActive​

Angular propose une directive appelée routerLinkActive qui permet d'ajouter automatiquement une certaine classe à un élément lorsque la route active (le chemin de la page courante) correspond au lien routerLink de l'élément.

Par exemple, vous pouvez modifier le lien pour ceci:

src/app/components/navbar.component.ts
//...

<li class="nav-item">
    <a class="nav-link" routerLink="/projets" routerLinkActive="active">Projets</a>
</li>

//...
info

routerLinkActive="active" ajoute automatiquement la classe CSS active à l'élément si le chemin de la page courante contient /projets.

Vous pouvez constater dans le HTML généré que la classe CSS active se retrouve sur l'élément de menu sans que vous l'ayez manuellement ajouté!

Imgur

Level Up