Search results

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

30 Sep 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
Copied to clipboard
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;
    }
  }
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<!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.3.47/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/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>
Copied to clipboard
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";
}