Implementing bootstrap modal dialog in angular7
In the src/index.html I changed the content of the body tag to:
<body>
<app-root></app-root>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</body>
In the component, which calls the modal, I have in the template:
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" (click)="showModal()">
Open modal
</button>
<app-modal></app-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
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" (click)="hideModal()">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="sendModal()" >Send</button>
<button type="button" class="btn btn-danger" (click)="hideModal()">Close</button>
<!-- this button is hidden, used to close from typescript -->
<button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
</div>
</div>
</div>
</div>
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
James D
I'm a mechanical engineer who wants to learn more about programming, mainly in javascript/angular2. I have experience as a project manager in Marine industries as well as earth moving. In 2014 I started getting in depth in programming, mainly in C#. In 2018 I switched to front-end development focusing on Angular In 2018 the company I work for asked me to switch to IT project manager, deploying tools for site superintendents.
Updated on October 09, 2020Comments
-
James D over 3 years
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 quickly nor clearly I thought I'd share my solution to help others. (first answer below)
In case you have to add multiple types of bootstrap widgets I suggest taking a look at (https://ng-bootstrap.github.io/#/home)
-
aRyhan about 5 yearswhy not use this to close the modal?
hideModal():void { $("#paymentModal").modal('hide'); }
-
James D almost 5 yearsGood question, it's been a while since I checked this but as far as I remember just doing the hide doesn't trigger the data-dismiss="modal", which means you modal is prefilled with the previous data when you reopen it. I know I tried it the way you suggested, but had a reason to switch to the way I'm doing it now. It could be that it's only be needed if you had some sort of form in there...