Aller au contenu principal

16-5 Déplacer le bouton de création

En dernier lieu, déplaçons le bouton Nouveau projet de façon à ce qu'il soit sur la même ligne que le titre Projets.

On déplacera le bouton du composant projets-liste vers la page projets-index.

  1. Supprimer le bouton Nouveau projet de la composante projets-liste
    src/app/features/projets/components/projets-liste.ts
    @Component({
    selector: 'app-projets-liste',
    imports: [
    RouterLink,
    DatePipe
    ],
    template: `
    // RETIREZ CES LIGNES!
    <div class="mb-3">
    <a class="btn btn-primary" routerLink="/projets/creer">Nouveau projet</a>
    </div>
  2. Modifiez projets-index afin d'y ajouter le bouton de création
    src/app/features/projets/pages/projets-index.ts
    @Component({
    selector: 'app-projets-index',
    imports: [
    ProjetsListe,
    RouterLink
    ],
    template: `
    <div class="row mb-3 mt-3">
    <div class="col-lg-9"><h1>Projets</h1></div>
    <div class="col-lg-3 d-flex align-items-center justify-content-end">
    <a class="btn btn-primary" routerLink="/projets/creer">Nouveau projet</a>
    </div>
    </div>

    <app-projets-liste [projets]="projets" (projetDeleted)="gestionProjetDeleted($event)"></app-projets-liste>
    `,
    styles: ``
    })
  3. Admirez!
    http://localhost:4200

Level Up