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

Question

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

Answer 1

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;
  }

Answer 2

You can get it "playing" with css and use ngClass or class

If you enclosed your modal like

<ng-template #content let-modal>
  <div [class.maximize]="maximize">
    <div class="modal-header">
    ..
  </div>
</ng-template>

And use, e.g.

  .maximize {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }

declare a variable maximize and your functions like

  maximize:boolean=false:
  max() {
    this.maximize=true;
  }
  min() {
    this.maximize=false;
  }

NOTE: before open the modal also change the variable maximize to false

NOTE2: you can put the code in your .html. Yours buttons like

<button (click)="maximize=true">Maximize</button>
<button (click)="maximize=false">Minimize</button>