Question 54554 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search