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{
 ...
}