Display a dialog with custom position in Angular Dialog component

27 Sep 20233 minutes to read

By default, the dialog is displayed in the center of the target container. The dialog position can be set using the position property by providing custom X and Y coordinates.
The dialog can be positioned inside the target based on the given X and Y values.

app.component.ts

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: `
    <div #container class='root-container'>
        <ejs-dialog id='firstDialog' #ejDialog header='Position-01' content='The dialog is positioned at {X: 160, Y: 14 } coordinates.' [target]='targetElement'
        width='360px' height='120px' [position]='position1'>
        </ejs-dialog>
        <ejs-dialog id='secondDialog' #ejDialog1 header='Position-02' content='The dialog is positioned at {X: 160, Y: 240} coordinates.' [target]='targetElement'
        width='360px' height='120px' [position]='position2'>
        </ejs-dialog>
      </div> `
})

export class AppComponent implements OnInit {
    @ViewChild('ejDialog') ejDialog: DialogComponent | undefined;
    @ViewChild('ejDialog1') ejDialog1: DialogComponent | undefined;
    // Create element reference for dialog target element.
    @ViewChild('container', { read: ElementRef }) container: ElementRef | undefined;
    // The Dialog shows within the target element.
    public targetElement?: HTMLElement;

    //To get all element of the dialog component after component get initialized.
    ngOnInit() {
      this.initilaizeTarget();
    }
    // Set Dialog position
    public position1: object={ X: 160, Y: 14 };
    public position2: object={ X: 160, Y: 240 };

    // Initialize the Dialog component's target element.
    public initilaizeTarget: EmitType<object> = () => {
      this.targetElement = this.container!.nativeElement.parentElement;
    }
}

app.module.ts

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 { }

main.ts

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

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);