How to hide bootstrap modal in angular
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">×</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
Related videos on Youtube
![Maddy](https://lh4.googleusercontent.com/-A5ky7tTvVLY/AAAAAAAAAAI/AAAAAAAAAFA/9pMUsAIAx1U/photo.jpg?sz=256)
Maddy
Updated on May 30, 2022Comments
-
Maddy about 2 years
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
-
Shabbir Dhangot over 5 yearsPossible duplicate of How to programatically close ng-bootstrap modal?
-
-
Sachin Shah over 5 years@Maddy Can you please update your status on answer/s ?
-
CmdrSharp about 4 yearsHi 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? is well worth reading!
-
Imtiaz Shakil Siddique about 4 yearsplease 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.
-
Mahdi Shokri about 4 yearsHi all. I add @ViewChild as ModalDirective instead of ElementRef. So you can use show and hide methods because that viewchild is a modal.
-
ganesh over 2 yearsAfter lot of search, found this easiest solution which is explained in detail how to do it. Thanks. You rock.