Add a minimize maximize buttons in EJ2 TypeScript Dialog control

8 May 20238 minutes to read

Dialog allows end users to either minimize or maximize the Dialog component. You can add minimize and maximize custom buttons near the close icon in the Dialog header using the headerTemplate property and handle the actions in the button click events, as shown in the following sample.

index.ts

import { enableRipple } from '@syncfusion/ej2-base';
import { Button } from '@syncfusion/ej2-buttons';
import { Dialog } from '@syncfusion/ej2-popups';

let dialogObj: Dialog = new Dialog({
    header: `<span class='title'>Dialog</span>
          <span class='e-icons sf-icon-Maximize' id='max-btn' title='Maximize'></span>
          <span class='e-icons sf-icon-Minimize' id='min-btn' title='Minimize'></span>`,
    content: "This is a dialog with minimize and maximize buttons",
    showCloseIcon: true,
    buttons: [{ buttonModel: { isPrimary: true, content: 'Yes', iconCss: 'e-icons e-ok-icon' }, click: btnClick }, { buttonModel: { content: 'No', iconCss: 'e-icons e-close-icon' }, click: btnClick }],
    target: document.body,
    height: 'auto',
    width: '300px',
    animationSettings: { effect: 'Zoom' },
    closeOnEscape: true
});
dialogObj.appendTo('#dialog');

document.getElementById('openBtn').onclick = (): void => {
    dialogObj.show();
};

function btnClick() {
    dialogObj.hide();
}
let hide: any;
let isFullScreen: Boolean;
let dialogOldPositions: any;

document.getElementById("max-btn").addEventListener("click", function() {
  let maximizeIcon;
    if (dialogObj.element.classList.contains('dialog-minimized')) {
      dialogObj.element.querySelector('#min-btn').classList.add('sf-icon-Minimize');
      dialogObj.element.querySelector('#min-btn').classList.remove('sf-icon-Restore');
      dialogObj.element.querySelector('#min-btn').setAttribute('title', 'Minimize');
    }
    if (!dialogObj.element.classList.contains('dialog-maximized') && !isFullScreen) {
      maximizeIcon = dialogObj.element.querySelector(".e-dlg-header-content .sf-icon-Maximize");
    } else {
      maximizeIcon = dialogObj.element.querySelector(".e-dlg-header-content .sf-icon-Restore");
    }
    if (!dialogObj.element.classList.contains('dialog-maximized')) {
      dialogObj.element.classList.add('dialog-maximized');
      dialogObj.show(true);
      maximizeIcon.classList.add('sf-icon-Restore');
      maximizeIcon.setAttribute('title', 'Restore');
      maximizeIcon.classList.remove('sf-icon-Maximize');
      dialogObj.element.querySelector('.e-dlg-content').classList.remove('hide-content');
      isFullScreen = true;
    } else {
      dialogObj.element.classList.remove('dialog-maximized');
      dialogObj.show(false);
      maximizeIcon.classList.remove('sf-icon-Restore');
      maximizeIcon.classList.add('sf-icon-Maximize');
      maximizeIcon.setAttribute('title', 'Maximize');
      dialogObj.element.querySelector('.e-dlg-content').classList.remove('hide-content');
      dialogObj.position = dialogOldPositions;
      dialogObj.dataBind();
      isFullScreen = false;
    }
});

  document.getElementById("min-btn").addEventListener("click", function() {
    let minimizeIcon = dialogObj.element.querySelector(".e-dlg-header-content .sf-icon-Minimize");
    if (!dialogObj.element.classList.contains('e-dlg-fullscreen')) {
      if (!dialogObj.element.classList.contains('dialog-minimized')) {
        dialogOldPositions = { X: dialogObj.position.X, Y: dialogObj.position.Y }
        dialogObj.element.classList.add('dialog-minimized');
        dialogObj.element.classList.remove('dialog-maximized');
        dialogObj.element.querySelector('.e-dlg-content').classList.add('hide-content');
        dialogObj.position = { X: 'center', Y: 'bottom' };
        dialogObj.dataBind();
        minimizeIcon.classList.add('sf-icon-Restore');
        minimizeIcon.setAttribute('title', 'Restore');
      } else {
        dialogObj.element.classList.remove('dialog-minimized');
        dialogObj.element.querySelector('.e-dlg-content').classList.remove('hide-content');
        minimizeIcon.classList.add('sf-icon-Minimize');
        minimizeIcon.setAttribute('title', 'Minimize');
        minimizeIcon.classList.remove('sf-icon-Restore');
        dialogObj.position = dialogOldPositions;
        dialogObj.dataBind();
      }
    } else {
      dialogObj.show(false);
      dialogObj.element.classList.remove('dialog-maximized');
      dialogObj.element.classList.add('dialog-minimized');
      dialogObj.element.querySelector('.e-dlg-content').classList.add('hide-content');
      minimizeIcon.classList.remove('sf-icon-Minimize');
      minimizeIcon.removeAttribute('title');
      dialogObj.position = { X: 'center', Y: 'bottom' };
      dialogObj.dataBind();
      isFullScreen = true;
    }
  });

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Dialog button with icons</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript UI Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body  class="close-dialog">
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="target" class="close-dialog">
            <center><button id="openBtn" class="e-control e-btn">Open</button></center>
            <div id="dialog"> </div>
        </div> 
    </div>
</body>
</html>