how to bring maximize and minimize logic to work in angular bootstrap modal popup

i am using Angular Bootstrap Modal Popup, here i want to show Maximize and Minimize options along with close button. When we click on max, it has to expand full screen, when min is clicked, it has to be in default size mentioned when popup has got opened. is there any way to do this without using jquery?

  openSm(content) {
    this.modalService.open(content, { size: 'sm', windowClass: 'dark-modal' });
  }

  openLg(content) {
    this.modalService.open(content, { size: 'lg', windowClass: 'light-modal' });
  }

Demo

So, here you have to use boolean variable & ngClass for adding CSS clases conditionally. Please refer below,

TS file :

//First declare a boolean 
 maximize:boolean=false:
  maxClick() {
    this.maximize=true;
  }
  minClick() {
    this.maximize=false;
  }

HTML file :

<ng-template #content let-modal>
  <div [ngClass]="(maximize)?'max':'min'">
    <div class="modal-header">
    ..
  </div>
</ng-template>

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
<button type="button" aria-label="Close" (click)="minClick()">Min</button>
<button type="button" aria-label="Close" (click)="maxClick()">Max</button>
 </div>
 </ng-template>

CSS File :

.max {
    width: 100vw;
    height: 100vh;
  }
.min {
    width: 300px;
    height: 300px;
  }