Resize in Angular Dialog component

26 Feb 20264 minutes to read

The Dialog supports resizing. Resize the dialog by selecting and dragging its handle (grip) or any of its edges or borders within the container.

Create a resizable dialog by setting the enableResize property to true. This allows you to change the dialog size dynamically and view content in expanded mode. The resizeHandles property configures the directions in which the dialog can be resized. When you set the target property along with enableResize, the dialog resizes within the specified target container.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DialogModule } from '@syncfusion/ej2-angular-popups'



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

@Component({
imports: [
        
		DialogModule
    ],


standalone: true,
  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' #ejDialog allowDragging='true' enableResize='true' [resizeHandles]='resizeHandleDirection' header='Dialog' content='This is a Dialog with resize enabled'
    [target]='targetElement' width='250px' [buttons]='buttons'> </ejs-dialog>`
})

export class AppComponent implements OnInit {
  @ViewChild('ejDialog') ejDialog: DialogComponent |any;
  // Create element reference for dialog target element.
  @ViewChild('container', { read: ElementRef }) container: ElementRef |any;
  // The Dialog shows within the target element.
  public targetElement?: HTMLElement;
  // This will resize the dialog in all the directions.
  public resizeHandleDirection: ResizeDirections[] = ['All'];

  // To get all element of the dialog component after component get initialized.
  ngOnInit() {
    this.initilaizeTarget();
  }

  // Initialize the Dialog component's target element.
  public initilaizeTarget: EmitType<object> = () => {
    this.targetElement = this.container.nativeElement.parentElement;
    this.resizeHandleDirection = ['All'];
  }
  // Hide the Dialog when click the footer button.
  public hideDialog: EmitType<object> = () => {
    this.ejDialog.hide();
  }
  // Enables the footer buttons
  public buttons: Object = [
      {
          'click': this.hideDialog.bind(this),
          // Accessing button component properties by buttonModel property
            buttonModel: {
            content: 'OK',
            isPrimary: true
          }
      },
      {
          'click': this.hideDialog.bind(this),
          buttonModel: {
            content: 'Cancel'
          }
      }
  ];
  // Sample level code to handle the button click action
  public onOpenDialog = (event: any): void => {
    // Call the show method to open the Dialog
    this.ejDialog.show();
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));