Implementing bootstrap modal dialog in angular7

Question

I was stuck for a while on implementing a simple bootstrap modal dialog box and found pieces of the answer in about 10 different pages. Considering I couldn\'t find the answer q

Answer 1

In the src/index.html I changed the content of the body tag to:

In the component, which calls the modal, I have in the template:

  Open modal

And in the typescript component

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

I build a separate component for the modal, in the template I have

  

    


      
      

        
Modal Heading
        ×
      

      
      

        Modal body..
      

      
      

        Send
        Close

        
        Close
      
    
  

And in the Typescript component I have

    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();
      }
    }

Now the modal dialog works, has a send function where some additional logic can be, and a hide function to close the modal from typescript