maximize and minimize functionality for a modal dialog in angular.

Question

Hello everyone,

We have developed a softphone application using Angular. The softphone is designed as a phone-shaped modal dialog, which is displayed on a component.

Now, what I would like to achieve is the ability to select and edit data on the component itself when I minimize the softphone (modal dialog). This means that even when the softphone is minimized, I should still be able to interact with and modify the content on the underlying component.

 <button  (click)="GetClickToCall(SoftPhonecontent )" > Call </button>



<ng-template #SoftPhonecontent let-ecab="close('a')" >
    <div class="dialog-buttons">
      <button mat-icon-button (click)="minimizeDialog()" >
        <mat-icon>remove</mat-icon>
      </button>
      <button mat-icon-button (click)="maximizeDialog()">
        <mat-icon>crop_square</mat-icon>
      </button>
    </div>
<div>
// here code for the dial-pad
</div>
 </ng-template>

above is the for HTML. for softphone.

.myCustomModalClass .modal-dialog {
  max-width: 17% !important;
}

@media (min-height: 900px) {
  .myCustomModalClass .modal-dialog {
    height: 90% !important;
 
  }
}

::ng-deep .modal-content {
  position: relative !important;
  display: flex;
  flex-direction: column;
  width: 90%;
  pointer-events: auto;
  background-color: #666c70;
  background-clip: padding-box;
  border: 2px solid #140d0d;
  border-radius: 8% !important;
  outline: 0;
  height: 60%;
  align-content: center;
  height: 550px !important;
 
}

.dial-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #666c70;
}

above is the code for CSS.

GetClickToCall(SoftPhonecontent){
this.modalService.open(content, { backdrop: "static", size: "sm", centered: true, windowClass: "myCustomModalClass", keyboard: false });
}

above is the code for Typescript . 

Any help would be appritiated.

Thank you.