9-2 Conteneur

La dernière étape pour avoir un visuel digne de ce nom serait d'envelopper la zone contenu dans un div avec la classe container afin que le contenu soit centré dans la page, avec une largeur maximale.

attention

Pour votre application, vous pourriez ne pas vouloir cette approche, par exemple si vous avez des vues qui occupent toute la largeur de l'écran. Il existe aussi container-fluid qui prends tout l'espace, avec seulement une petite marge de chaque côté.

src/app/app.ts

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, Navbar, Footer],
  template: `
    <app-navbar></app-navbar>
    <main class="flex-grow-1">
      <div class="container">
        <router-outlet></router-outlet>
      </div>
    </main>
    <app-footer></app-footer>
  `,
  styles: [],
})
expo

http://localhost:4200