Menu
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)
395
You can easily use bootstrap 4 modal in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12 and angular 13 application.
Create a new component with Angular CLI and add some HTML code to the template. 2. Inject MdbModalService to the component from which you want to open the modal and use the open method. You can inject data to the modal by passing it to the data parameter in the modal options.
Let us execute the displayed command and add the NgBootstrap library into the angular project; theoretically, this package is used with Bootstrap in angular. Get inside the app/app.module.ts file, import NgbModule from the ‘@ng-bootstrap/ng-bootstrap’ package, plus add the module into the imports array.
Create a button call the triggerModal () method using the click event, plus pass the modal id to it. The ng-template directive evokes the modal popup; apparently, it is more identical to the bootstrap modal HTML structure. Open and insert given code in app/app.component.html file:
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
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With