How to hide bootstrap modal in angular

Question

I am using bootstrap modal but when I hide it from code-behind it shows the error below.

I am using angular6.

Code

<div #exampleModal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">

  @ViewChild('exampleModal') public exampleModal: ElementRef;

 this.exampleModal.hide();

Error message

ERROR TypeError: this.exampleModal.hide is not a function

Possible duplicate of [How to programatically close ng-bootstrap modal?](https://stackoverflow.com/questions/40382319/how-to-programatically-close-ng-bootstrap-modal) — Shabbir Dhangot, Oct 16 '18 at 13:34

Hien Nguyen · Answer 1 · 2019-06-29T01:09:33.723

You can add close button HTML in your modal dialog and add template variable #closebutton

In ts code, you call this.closebutton.nativeElement.click(); to close modal dialog.

HTML

<div class="container">
  <h2>Modal Close</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open</button>

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

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" #closebutton class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <p>Content here</p> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" id="closeModal"  (click)="onSave()">Save</button>
         </div> 
      </div>
    </div>
  </div>

</div>

TS

export class AppComponent implements OnInit {
  @ViewChild('closebutton') closebutton;

  constructor(private fb: FormBuilder) { }

  public ngOnInit() {

  }

  public onSave() {
    this.closebutton.nativeElement.click();
  }
}

Demo https://stackblitz.com/edit/angular-close-bootstrap-modal?file=src/app/app.component.html

Update:

I have another solution without trick on close button.

First step you need install jquery and bootstrap by npm command.

Second you need add declare var $ : any; in component

And use can use $('#myModal').modal('hide'); on onSave() method

Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

After lot of search, found this easiest solution which is explained in detail how to do it. Thanks. You rock. — ganesh, Nov 10 '21 at 16:45

score 1 · Answer 2 · answered Apr 05 '20 at 07:16

1

This is my solution:

html:

<div class="modal fade" id="myModal" role="dialog" #myModal>
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <p>Content here</p> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" id="closeModal"  (click)="onSave()">Save</button>
         </div> 
      </div>
    </div>
  </div>

ts:

export class AppComponent implements OnInit {
  @ViewChild('myModal', { static: false }) myModal: ModalDirective;

  constructor(private fb: FormBuilder) { }

  public ngOnInit() {

  }

  public onSave() {
    this.myModal.hide();
  }
}

answered Apr 05 '20 at 07:16

Mahdi Shokri

11
2

Hi and welcome to S/O - and thank you for actively contributing! :) Please consider expanding on your answer. It's helpful to provide context around an answer, instead of only code. [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) is well worth reading! – CmdrSharp Apr 05 '20 at 08:13
please explain why your solution works. The question itself is ambiguous, so you should ask questions in comment section to clarify the question rather than jumping to write an answer. – Imtiaz Shakil Siddique Apr 05 '20 at 12:04
1

Hi all. I add @ViewChild as ModalDirective instead of ElementRef. So you can use show and hide methods because that viewchild is a modal. – Mahdi Shokri Apr 05 '20 at 14:19
1

Hi, where does the MOdalDirective comes from? – Benjamin Martin May 10 '23 at 10:42

score 0 · Answer 3 · answered Oct 16 '18 at 12:59

I have a another option for this which is very easy and works for me.

E.x: This is your model code in HTML file.

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" id="closeModel">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <!-- Do your stuff -->
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>


  </div>
</div>

Now in your .ts file where you want to close modal just use jquery for that.

Note: You need to install jquery for that and need to import in file.

Now click on close button by jquery.

$(document).ready(function(){    
    $("#closeModel").click();  // That's it... Model will close. 
});

@Maddy Can you please update your status on answer/s ? – Sachin Shah Oct 22 '18 at 18:01 — Sachin Shah, Oct 22 '18 at 18:01

score -1 · Answer 4 · answered Oct 17 '18 at 03:51

-1

You can use ngx-bootstrap modal for controlling modal from Code. https://valor-software.com/ngx-bootstrap/#/modals

answered Oct 17 '18 at 03:51

Pranesh Udumalpet Hanumanth

308
1
6

How to hide bootstrap modal in angular

4 Answers4

Linked