Aller au contenu principal

8-2 Créer une barre de navigation

Même si la navigation sera potentiellement plutôt simple, une barre de navigation permettant d'afficher le nom du site, un lien pour revenir à l'accueil et éventuellement le nom de la personne connectée serait utile.

Pour ce faire, on créera un composant spécialement pour la barre de navigation. En effet, il s'agit d'un élément visuel distinct que nous voudrons réutiliser sur toutes les pages.

Créer le composant Navbar​

  1. Créez un composant Navbar via Angular CLI. Nous mettrons ce composant dans un dossier components, à l'intérieur du dossier shared.

    ng generate component shared/components/navbar
    info

    Remarquez qu'il est possible de donner un chemin relatif au dossier src/app et Angular créera le composant au bon endroit!

    img

  2. Cela devrait avoir créé un fichier src/app/shared/components/navbar.ts dans votre projet

  3. Commençons par une version minimaliste de la barre de navigation ne contenant que le nom de l'application. Modifiez navbar.ts pour ajouter la barre de navigation dans la portion template du composant:

    src/app/shared/components/navbar.ts
    @Component({
    selector: 'app-navbar',
    imports: [],
    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" href="">Houdini</a>
            </div>
        </nav>
    `,
    styles: ``
    })

Intégrer le composant à l'application​

Le composant App est le composant racine de l'application. Tout ce qui se trouve dans ce composant sera visible partout ailleurs!. Ainsi, mettre la barre de navigation dans ce dernier est tout à fait logique.

Dans le fichier src/app/app.ts, ajoutez la référence au nouveau composant de navbar dans la portion template, dans le haut complètement.

src/app/app.ts
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, ProjetsListe, Navbar],
  template: `
    <app-navbar></app-navbar>
    <h1>{{title}}!</h1>
    <app-projets-liste></app-projets-liste>

    <router-outlet />
  `,
  styles: [],
})

Vous pouvez visiter le site et devriez être en mesure de constater la présence de la barre de navigation.

http://localhost:4200

img