Aller au contenu principal

21-1 Fenêtre modale et bouton d'ajout

On créera premièrement un composant permettant d'afficher une fenêtre modale pour le formulaire de création d'issue, en plus de créer le bouton permettant de lancer l'ouverture de la fenêtre.

Créer un composant de fenêtre modale IssueCreerModalComponent​

  1. Créez la composant via le terminal:
ng g component features/issues/components/issue-creer-modal
info

On indique dans le nom qu'il s'agit d'un modal, par souci de clarté. On met le composant sous le dossier features/issues/components puisqu'on crée une fenêtre modale pour la création d'une issue.

  1. Injectez NgbActiveModal pour avoir une référence à la fenêtre modale active. La propriété est publique puisqu'on en a besoin dans le gabarit HTML afin de fermer la fenêtre.

    src/app/features/issues/components/issue-creer-modal.ts
    export class IssueCreerModal {
      constructor(public activeModal: NgbActiveModal) {
      }
    }

  2. Implémentez le HTML de base d'une fenêtre modale Bootstrap

    src/app/features/issues/components/issue-creer-modal.ts
    @Component({
      selector: 'app-issue-creer-modal',
      imports: [],
      template: `
        <div class="modal-header">
          <h4 class="modal-title">Ajouter une tâche</h4>
          <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss(false)"></button>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Créer</button>
          <button type="button" class="btn btn-secondary" (click)="activeModal.close(false)">Annuler</button>
        </div>
      `,
      styles: ``
    })
    info

    Le bouton submit n'est lié à rien pour le moment, seuls les boutons de fermeture sont liés à l'action de fermeture.

Ajouter un bouton pour créer une nouvelle tâche (issue)​

  1. Sur la "liste" des issues (issues-liste) d'un projet, ajoutez un bouton qui sera utilisé pour lancer la fenêtre modale.
    src/app/features/issues/components/issues-liste.ts
    @Component({
      selector: 'app-issues-liste',
      imports: [],
      template: `
        <div class="d-flex justify-content-between">
          <h2>Issues</h2>
          <button class="btn btn-primary">Ajouter une tâche</button>
        </div>
        <p>La liste des issues pour le projet {{ projetId }} sera affichée ici.</p>
      `,
      styles: ``
    })
  2. Lier le bouton à une fonction qui lancera une fenêtre modale, soit ouvrirCreerIssueModal()
    src/app/features/issues/components/issues-liste.ts
    <button class="btn btn-primary" (click)="ouvrirCreerIssueModal()">Ajouter une tâche</button>
  3. Implémentez la coquille de la fonction ouvrirCreerIssueModal() dans la composante
    src/app/features/issues/components/issues-liste.ts
    //...

    protected async ouvrirCreerIssueModal() {
      
    }

    //...

Ouvrir le modal au clic du bouton​

Injecter NgbModal dans ProjetIssuesListeComponent​

Afin de lancer un modal, on aura recours à NgbModal de ng-bootstrap. En effet, ce dernier expose une fonction open() acceptant une composante en paramètre.

src/app/features/issues/components/issues-liste.ts
export class IssuesListe implements OnInit, OnChanges {
  @Input() projetId: number | null = null;

  constructor(private modalService: NgbModal) {}

Ouvrir le modal​

Finalement, ouvrez le modal via la fonction open() du service modalService.

src/app/features/issues/components/issues-liste.ts
protected async ouvrirCreerIssueModal() {
  const modal = this.modalService.open(IssueCreerModal);
}

En cliquant sur le bouton, vous devriez avoir quelque chose comme ceci:

http://localhost:4200