How do I toggle bootstrap 4 modal using Angular2 Component/ Typescript

Question

I am not able to toggle a bootstrap modal using Typescript. I am using the default bootstrap 4 Modal. Here is the code.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

And Here is a button that Bootstrap 4 provides to toggle the Modal

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

I am not using this button in my application. I want to show Modal through a function in one of my Angular 2 component. I have accessed the html element with the following code.

  ngOnInit() {
    this.modalElement = document.getElementById('myModal');
  }

Now I need to activate the modal to show it using a method call. I was not about to find a solution to do that. I tried methods like .show() and other solutions but none worked.

Answer 1

you can use @ViewChild() decorator to get the reference of modal in component and then use it with jQuery to call .modal() method to open model from within the function.

declare any local variable in your template, for ex #myModal.

<div #myModal class="modal fade" id="myModal" tabindex="-1" role="dialog" 
  aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

use it in your component with @ViewChild() decorator.

import { ViewChild } from '@angular/core';
import { ElementRef } from '@angular/core';
@Component({
  ...
})
export class YourComponent {
  @ViewChild('myModal') myModal:ElementRef;

   yourFunction(){
     //open modal using jQuery
     jQuery(this.myModal.nativeElement).modal('show'); 
   }
}

you can find steps to include jQuery in your project here.

In case if .modal() method gives you error saying .modal() is not a function, just declare a jQuery variable in your component file as follows.

declare var jQuery:any;

@Component({
 ...
})
export class YourComponent{
 ...
}

Answer 2

3 Step to toggle(show or hide) bootstrap modal:

1. Add ViewChild to access to the modal like below code:

   Tip: Notice to the #modal in code in the first line:

   <div class="modal fade" #modal>
       <div class="modal-dialog">
           <div class="modal-content">
               <form>
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                       <header class="font-12 bold">Modal Header</header>
                   </div>
                   <div class="modal-body">
                       Your Content ...
                   </div>
                   <div class="modal-footer">
                       <button type="submit" class="btn btn-primary">Save</button>
                       <button type="button" class="btn btn-danger" data-dismiss="modal">close</button>
                   </div>
               </form>
           </div>
       </div>
   </div>
   

2. Add Button for showing modal in your html:

   Tip: Notice to the (click)="showModal()":

   <button type="button" class="btn btn-primary" (click)="showModal()">Show Modal</button>
   

3. Inside your component, put this codes:

   Tip: Notice to showModal function and accessing jquery sign inside component:

   // jQuery Sign $
   declare let $: any;
   
   @Component({
       ...
   })
   export class YourComponent {
       @ViewChild('modal') modal:ElementRef;
   
       showModal(){
           // Show modal with jquery
           $(this.modal.nativeElement).modal('show'); 
       }
   }
   

Answer 3

I would suggest using a dedicated library that provides seamless Bootstrap 4 integration for Angular 2+. ng-bootstrap has excellent modal implementation where opening a modal with content from a component boils down to:

 @Component({
  selector: 'ngbd-modal-component',
  templateUrl: './modal-component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(MyContent);
  }
}

You can read full documentation here: https://ng-bootstrap.github.io/#/components/modal and check a live example with this plunk: http://plnkr.co/edit/vAsduJNgB0x6fWPQudQD?p=preview