Search results

Display a Dialog with custom position in Angular Dialog component

20 Apr 2021 / 2 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.

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

    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 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'>
      </div> `

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

    //To get all element of the dialog component after component get initialized.
    ngOnInit() {
    // 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;
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
    imports: [
    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';

Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <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="" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src="systemjs.config.js"></script>

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

Copied to clipboard
#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%;