How to Add minimize and maximize buttons to Dialog header in Angular Dialog component

Angular

Search results

18 May 2022 / 3 minutes to read

Angular 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.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.html

index.css

import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';

@Component({
    selector: 'app-root',
    template: `
    <button class="e-control e-btn" style="position: absolute;" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button>
    <div #container class='root-container'></div>
      <ejs-dialog id='dialog' #Dialog showCloseIcon='true' [visible]='visible' content='This is a dialog with minimize and maximize buttons' [target]='targetElement'
      width='250px' [buttons]='buttons'>
      <ng-template #header>
          <span class='title'>Dialog</span>
          <span class='e-icons sf-icon-Maximize' id='max-btn' title='Maximize' (click)='maximize()'></span>
          <span class='e-icons sf-icon-Minimize' id='min-btn' title='Minimize' (click)='minimize()'></span>
      </ng-template>
      </ejs-dialog> `
})

export class AppComponent implements OnInit {
    @ViewChild('Dialog') dialogObj: DialogComponent;
    // Create element reference for dialog target element.
    @ViewChild('container', { read: ElementRef }) container: ElementRef;
    // The Dialog shows within the target element.
    public targetElement: HTMLElement;
    public width: string = '350px';
    public hide: any;
    public isFullScreen: Boolean;
    public dialogOldPositions: any;
    //To get all the elements of the dialog component after the component is initialized.
    ngOnInit() {
      this.initilaizeTarget();
    }
    // Initialize the Dialog component's target element.
    public initilaizeTarget: EmitType<object> = () => {
      this.targetElement = this.container.nativeElement.parentElement;
    }
    public visible: Boolean = false;
    // Hide the Dialog when click the footer button.
    public hideDialog: EmitType<object> = () => {
        this.dialogObj.hide();
    }
    // Enables the footer buttons
    public buttons: Object = [
        {
            'click': this.hideDialog.bind(this),
            // Accessing button component properties by using the buttonModel property
              buttonModel:{
              content:'OK',
              //Enables the primary button
              isPrimary: true
            }
        },
        {
            'click': this.hideDialog.bind(this),
            buttonModel:{
              content:'Cancel'
            }
        }
    ];
    public onOpenDialog = function(event: any): void {
        // Call the show method to open the Dialog
        this.dialogObj.show();
    }
    public maximize(): void {
    var maximizeIcon;
    if (this.dialogObj.element.classList.contains('dialog-minimized')) {
      this.dialogObj.element.querySelector('#min-btn').classList.add('sf-icon-Minimize');
      this.dialogObj.element.querySelector('#min-btn').classList.remove('sf-icon-Restore');
      this.dialogObj.element.querySelector('#min-btn').setAttribute('title', 'Minimize');
    }
    if (!this.dialogObj.element.classList.contains('dialog-maximized') && !this.isFullScreen) {
      maximizeIcon = this.dialogObj.element.querySelector(".e-dlg-header-content .sf-icon-Maximize");
    } else {
      maximizeIcon = this.dialogObj.element.querySelector(".e-dlg-header-content .sf-icon-Restore");
    }
    if (!this.dialogObj.element.classList.contains('dialog-maximized')) {
      this.dialogObj.element.classList.add('dialog-maximized');
      this.dialogObj.show(true);
      maximizeIcon.classList.add('sf-icon-Restore');
      maximizeIcon.setAttribute('title', 'Restore');
      maximizeIcon.classList.remove('sf-icon-Maximize');
      this.dialogObj.element.querySelector('.e-dlg-content').classList.remove('hide-content');
      this.isFullScreen = true;
    } else {
      this.dialogObj.element.classList.remove('dialog-maximized');
      this.dialogObj.show(false);
      maximizeIcon.classList.remove('sf-icon-Restore');
      maximizeIcon.classList.add('sf-icon-Maximize');
      maximizeIcon.setAttribute('title', 'Maximize');
      this.dialogObj.element.querySelector('.e-dlg-content').classList.remove('hide-content');
      this.dialogObj.position = this.dialogOldPositions;
      this.dialogObj.dataBind();
      this.isFullScreen = false;
    }
  }

  public minimize(): void {
    var minimizeIcon = this.dialogObj.element.querySelector(".e-dlg-header-content .sf-icon-Minimize");
    if (!this.dialogObj.element.classList.contains('e-dlg-fullscreen')) {
      if (!this.dialogObj.element.classList.contains('dialog-minimized')) {
        this.dialogOldPositions = { X: this.dialogObj.position.X, Y: this.dialogObj.position.Y }
        this.dialogObj.element.classList.add('dialog-minimized');
        this.dialogObj.element.classList.remove('dialog-maximized');
        this.dialogObj.element.querySelector('.e-dlg-content').classList.add('hide-content');
        this.dialogObj.position = { X: 'center', Y: 'bottom' };
        this.dialogObj.dataBind();
        minimizeIcon.classList.add('sf-icon-Restore');
        minimizeIcon.setAttribute('title', 'Restore');
      } else {
        this.dialogObj.element.classList.remove('dialog-minimized');
        this.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');
        this.dialogObj.position = this.dialogOldPositions;
        this.dialogObj.dataBind();
      }
    } else {
      this.dialogObj.show(false);
      this.dialogObj.element.classList.remove('dialog-maximized');
      this.dialogObj.element.classList.add('dialog-minimized');
      this.dialogObj.element.querySelector('.e-dlg-content').classList.add('hide-content');
      minimizeIcon.classList.remove('sf-icon-Minimize');
      minimizeIcon.removeAttribute('title');
      this.dialogObj.position = { X: 'center', Y: 'bottom' };
      this.dialogObj.dataBind();
      this.isFullScreen = true;
    }
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
		DialogModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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

<head>
    <title>EJ2 Dialog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <app-root id="dialog-container">
        <div id='loader'>LOADING....</div>
    </app-root>
</body>

</html>

html,
body,
#dialog-container {
    display: block;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.control-section {
    height: 100%;
    min-height: 350px;
  }
.dialog-minimized {
    top: 261px !important;  
 }
  .control-section {
    width: 450px;
    height: 500px;
    border: 1px solid black;
  }

  .e-dialog .e-dlg-header {
    width: auto;
  }

  .e-dialog .e-dlg-header .e-icons.sf-icon-Maximize::before,
  .e-dialog .e-dlg-header .e-icons.sf-icon-Minimize::before,
  .e-dialog .e-dlg-header .e-icons.sf-icon-Restore::before {
      position: relative;
  }

  .e-dialog .e-dlg-header .e-icons.sf-icon-Minimize,
  .e-dialog .e-dlg-header .e-icons.sf-icon-Maximize,
  .e-dialog .e-dlg-header .e-icons.sf-icon-Restore {
      font-size: 14px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      float: right;
      position: relative;
      text-align: center;
      cursor: pointer;
  }

  .e-dialog .e-dlg-header .e-icons.sf-icon-Minimize:hover, .e-dialog .e-dlg-header .e-icons.sf-icon-Maximize:hover,
  .e-dialog .e-dlg-header .e-icons.sf-icon-Restore:hover {
      background-color: #e0e0e0;
      border-color: transparent;
      box-shadow: 0 0 0 transparent;
      border-radius: 50%;
  }

  .e-dialog .e-dlg-header .e-icons.sf-icon-Minimize,
  .e-dialog .e-dlg-header .e-icons.sf-icon-Restore {
      padding-left: 5px;
      padding-right: 5px;
  }
  
  .e-dialog .e-dlg-header {
      position: relative;
      top: 1px;
  }
  
  .e-dialog .e-dlg-content.hide-content, .e-dialog .e-footer-content.hide-content {
      display: none;
  }
  
  .e-dialog .e-dlg-header span.title {
      width: 60px;
      display: inline-block;
  }

@font-face {
    font-family: 'Min-Max_FONT';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfUAAAEoAAAAVmNtYXDnE+dkAAABlAAAADxnbHlmQCkX6AAAAdwAAADkaGVhZBK7D5EAAADQAAAANmhoZWEIVQQGAAAArAAAACRobXR4FAAAAAAAAYAAAAAUbG9jYQBaAJwAAAHQAAAADG1heHABEgAgAAABCAAAACBuYW1l8Rnd5AAAAsAAAAJhcG9zdDbKxecAAAUkAAAATwABAAAEAAAAAFwEAAAAAAAD+AABAAAAAAAAAAAAAAAAAAAABQABAAAAAQAAK4KTXV8PPPUACwQAAAAAANfSZU4AAAAA19JlTgAAAAAD+AP4AAAACAACAAAAAAAAAAEAAAAFABQAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAwQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAEAAQAAQAA5wP//wAA5wD//wAAAAEABAAAAAEAAgADAAQAAAAAAA4AKgBMAHIAAQAAAAADkwIyAAMAABMhNSFtAyb82gHOZAAAAAMAAAAAA/gD+AADAAcACwAAAREhESUVITUDIREhA5P82gMm/NplA/D8EALK/aMCXcllZfx1A/AAAQAAAAADkwOSAAsAABMJARcJATcJAScJAWwBTf6zRwFNAU1H/rMBTUf+s/6zA0v+tf61RwFL/rVHAUsBS0f+tQFLAAADAAAAAAP4A/gABQALABMAABMzIREhESURIxEhNQcjESE1MxEh0mQBlP2jAyZl/ghkygMmyvzaAsr9owJdyf2jAfhlZfzaygMmAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAMAAEAAQAAAAAAAgAHAA0AAQAAAAAAAwAMABQAAQAAAAAABAAMACAAAQAAAAAABQALACwAAQAAAAAABgAMADcAAQAAAAAACgAsAEMAAQAAAAAACwASAG8AAwABBAkAAAACAIEAAwABBAkAAQAYAIMAAwABBAkAAgAOAJsAAwABBAkAAwAYAKkAAwABBAkABAAYAMEAAwABBAkABQAWANkAAwABBAkABgAYAO8AAwABBAkACgBYAQcAAwABBAkACwAkAV8gTWluLU1heF9GT05UUmVndWxhck1pbi1NYXhfRk9OVE1pbi1NYXhfRk9OVFZlcnNpb24gMS4wTWluLU1heF9GT05URm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABNAGkAbgAtAE0AYQB4AF8ARgBPAE4AVABSAGUAZwB1AGwAYQByAE0AaQBuAC0ATQBhAHgAXwBGAE8ATgBUAE0AaQBuAC0ATQBhAHgAXwBGAE8ATgBUAFYAZQByAHMAaQBvAG4AIAAxAC4AMABNAGkAbgAtAE0AYQB4AF8ARgBPAE4AVABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAQIBAwEEAQUBBgAITWluaW1pemUITWF4aW1pemUFQ2xvc2UHUmVzdG9yZQAAAA==) format('truetype');
    font-weight: normal;
    font-style: normal;
}

[class^="sf-icon-"], [class*=" sf-icon-"] {
    font-family: 'Min-Max_FONT' !important;
    speak: none;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sf-icon-Minimize:before {
    content: "\e700";
}

.sf-icon-Maximize:before {
    content: "\e701";
}

.sf-icon-Close:before {
    content: "\e702";
}

.sf-icon-Restore:before {
    content: "\e703";
}

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!