web-dev-qa-db-fra.com

Implémenter bootstrap dialogue modal dans angular7

J'ai été bloqué pendant un certain temps sur la mise en œuvre d'une simple boîte de dialogue modale bootstrap et j'ai trouvé des éléments de la réponse dans environ 10 pages différentes. Étant donné que je ne pouvais pas trouver la réponse rapidement ni clairement, je pensais que je '' d partage ma solution pour aider les autres (première réponse ci-dessous)

Dans le cas où vous devez ajouter plusieurs types de widgets bootstrap je suggère de jeter un œil à ( https://ng-bootstrap.github.io/#/home )

angularbootstrap-4bootstrap-modal
2
James D

Dans le src/index.html j'ai changé le contenu de la balise body en:

 <body>
    <app-root></app-root>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
    </script>
</body>

Dans le composant, qui appelle le modal, j'ai dans le modèle:

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" (click)="showModal()">
  Open modal
</button>
<app-modal></app-modal>

Et dans le composant TypeScript

    showModal(): void {   
        this.displayService.setShowModal(true); 
        // communication to show the modal, I use a behaviour subject from a service layer here
    }

Je construis un composant séparé pour le modal, dans le modèle que j'ai

<!-- The Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" (click)="hideModal()">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="sendModal()" >Send</button>
        <button type="button" class="btn btn-danger" (click)="hideModal()">Close</button>

        <!-- this button is hidden, used to close from TypeScript -->
        <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
      </div>
    </div>
  </div>
</div>

Et dans le composant TypeScript que j'ai

    import { Component, OnInit } from '@angular/core';

    // This lets me use jquery
    declare var $: any;

    @Component({
      selector: 'app-modal',
      templateUrl: './modal.component.html',
      styleUrls: ['./modal.component.css']
    })
    export class ModalComponent implements OnInit {
      constructor() { }

      ngOnInit() {
      }
      showModal():void {
        $("#myModal").modal('show');
      }
      sendModal(): void {
        //do something here
        this.hideModal();
      }
      hideModal():void {
        document.getElementById('close-modal').click();
      }
    }

Maintenant, la boîte de dialogue modale fonctionne, a une fonction d'envoi où une logique supplémentaire peut être, et une fonction de masquage pour fermer le modal de TypeScript

5
James D