Bootstrap modal-dialog resize with Maximize/Minimize icons in Angular 7 - css

Question

I am using Bootstrap Model-dialog popup to display my content in my Angular 7 application. using this in multiple places, I am changing the width and height of popup against the content loaded.
Now I need to add the Minimize/Maximize icons to popup. Users can resize the popup by clicking on min/max icons. is there any property to resize popup width and height.
this.showModelPopup.open().then((result) => {
}, (reason) => {
});
In Html
<div class="modal-dialog">
<ng-template #content let-modal>
<div id="Status" data-grid="col-md-12">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" (click)="">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
<div>
// My content here
</div>
</div>
</div>
</div>
</ng-template>

Answer 1

Your angular html template is going to look like this:
<div class="modal-dialog" id="my-modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
<span class="fa fa-window-maximize cursor-pointer modal-resize" (click)="maximize();" *ngIf="!this.isMaximize" title="Maximize"></span>
<span class="fa fa-window-restore cursor-pointer modal-resize" (click)="restore()" *ngIf="this.isMaximize" title="Restore"></span>
Your header
</div>
<div class="modal-body" id="my-modal-body">
Your body
</div>
<div class="modal-footer">
Your footer
</div>
</form>
</div>
And your respective angular component .ts class file going to have following:
isMaximize = false;
maximize() {
this.isMaximize = !this.isMaximize;
document.getElementById('my-modal-dialog').style.maxWidth = "100%";
document.getElementById('my-modal-dialog').style.margin = "auto";
document.getElementById('my-modal-dialog').style.display = "inline";
document.getElementById('my-modal-body').style.maxHeight = "calc(100vh - 139px)";
}
restore() {
this.isMaximize = !this.isMaximize;
document.getElementById('my-modal-dialog').style.maxWidth = "";
document.getElementById('my-modal-dialog').style.margin = "";
document.getElementById('my-modal-dialog').style.display = "block";
document.getElementById('my-modal-body').style.maxHeight = "calc(100vh - 190px)";
}