8-3 Créer un footer

Nous avons une barre de navigation, il manque un footer pour compléter la structure de base de la page.

Créer le composant

Créez un composant Footer via Angular CLI
```
ng generate component shared/components/footer
```
info
Tout comme la barre de navigation, il s'agit d'un composant partagé à l'ensemble de l'application. Nous le mettons donc dans le dossier shared.
Cela devrait avoir créé un fichier src/app/shared/components/footer.ts dans votre projet

Commençons par une version minimaliste du footer. Modifiez footer.ts:

src/app/shared/components/footer.ts
@Component({
    selector: 'app-footer',
    imports: [],
    template: `
        <footer class="border-top text-muted py-3 mt-4">
        <div class="container">
            &copy; 2025 - Houdini
        </div>
        </footer>
    `,
    styles: ``
})

info

py-3 applique un padding de 1rem en y (haut et bas)
mt-4 applique margin-top: 1.5rem

Intégrer le composant à l'application

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

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

    <router-outlet />

    <app-footer></app-footer>
  `,
  styles: [],
})

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

http://localhost:4200

info

Constat: visuellement ce n'est pas vraiment élégant.

Pour obtenir un résultat satisfaisant, c'est-à-dire que la zone de contenu prend toute la place en hauteur, que la navigation soit dans le haut et le footer dans le bas complètement, la façon la plus flexible et recommandée est d'utiliser le principe de flexbox.

Nous allons organiser le tout un peu plus loin.

Créer le composant​

Intégrer le composant à l'application​

Créer le composant

Intégrer le composant à l'application