This section explains the steps to create a simple Dialog component and configure its available functionalities in Angular.
The following section explains the steps required to create a simple angular-cli application and how to configure Dialog
component.
To get started with Syncfusion Angular UI Components, make sure that you have compatible versions of Angular and TypeScript.
Angular provides an easiest way to setup project using Angular CLI Angular CLI tool.
Install the CLI application globally in your machine.
npm install -g @angular/cli
ng new syncfusion-angular-app
Once you have executed the above command you may ask for following options,
By default, it install the CSS style base application. To setup with SCSS, pass —style=SCSS argument on create project.
Example code snippet.
ng new syncfusion-angular-app --style=SCSS
Use below command to Navigate into the created project folder.
cd syncfusion-angular-app
Syncfusion packages are distributed in npm as @syncfusion
scoped packages. You can get all the angular Syncfusion package from npm link.
Add Syncfusion Angular popups package in your application by using following Command,
npm install @syncfusion/ej2-angular-popups --save
(or)
npm i @syncfusion/ej2-angular-popups --save
Once you have successfully installed the popups package, the component modules are ready to configure in your application from the installed location. Syncfusion Angular package provides two different types of ngModules.
Refer to Ng-Module to learn about ngModules
.
Refer to the following snippet to import the DialogModule
in app.module.ts
from the @syncfusion/ej2-angular-popups
.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// Imported syncfusion DialogModule from popups package
import { DialogModule } from '@syncfusion/ej2-angular-popups';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
// Registering EJ2 Dialog Module
DialogModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Add the Dialog component snippet in app.component.ts
as follows.
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' #ejDialog content='This is a Dialog with content' [target]='targetElement' width='250px'>
</ejs-dialog>`
})
export class AppComponent implements OnInit {
@ViewChild('ejDialog') ejDialog: 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() {
this.initilaizeTarget();
}
// Initialize the Dialog component target element.
public initilaizeTarget: EmitType<object> = () => {
this.targetElement = this.container.nativeElement.parentElement;
}
// Sample level code to handle the button click action
public onOpenDialog = function(event: any): void {
// Call the show method to open the Dialog
this.ejDialog.show();
};
}
Add following styles in corresponding css file. The below mentioned styles are used in styles.css file,
html,
body,
#dialog-container {
display: block;
height: 100%;
margin: 0;
overflow: hidden;
width: 100%;
}
Note: Please do the necessary change in index.html
file. In this demo we used id selector in <app-root id='dialog-container'></app-root>
The following CSS files are available in ../node_modules/@syncfusion
package folder. This can be referenced in [src/styles.css] using following code.
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components. This web tool is useful to combine the required component scripts and styles in a single file.
Run the ng serve
command in command window, it will serve your application and you can open the browser window. Output will appear as follows.
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' #ejDialog content='This is a Dialog with content' [target]='targetElement' width='250px'>
</ejs-dialog>
`
})
export class AppComponent implements OnInit {
@ViewChild('ejDialog') ejDialog: 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() {
this.initilaizeTarget();
}
// Initialize the Dialog component target element.
public initilaizeTarget: EmitType<object> = () => {
this.targetElement = this.container.nativeElement.parentElement;
}
// Sample level code to handle the button click action
public onOpenDialog = function(event: any): void {
// Call the show method to open the Dialog
this.ejDialog.show();
};
}
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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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%;
margin: 0;
overflow: hidden;
width: 100%;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
In the dialog control, max-height is calculated based on the dialog target element height. If the target property is not configured, the document.body is considered as a target. Therefore, to show a dialog in proper height, you need to add min-height to the target element. If the dialog is rendered based on the body, then the dialog will get the height based on its body element height. If the height of the dialog is larger than the body height, then the dialog’s height will not be set. For this scenario, we can set the CSS style for the html and body to get the dialog height.
html, body {
height: 100%;
}
A modal shows an overlay behind the Dialog. So, the user should interact the Dialog compulsory before interacting with the remaining content in an application.
While the user clicks the overlay, the action can be handled through the
overlayClick
event. In the below sample the
Dialog close action is performed while clicking on the overlay.
When the modal Dialog is opened, the Dialog’s target scrolling will be disabled. The scrolling will be enabled again once close the Dialog.
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 Modal Dialog</button>
<div #container class='root-container'></div>
<ejs-dialog id='dialog' #ejDialog isModal='true' (overlayClick)="onOverlayClick()"
content='This is a modal dialog' [target]='targetElement' width='250px'> </ejs-dialog>`
})
export class AppComponent implements OnInit {
@ViewChild('ejDialog') ejDialog: DialogComponent;
// The Dialog shows within the 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() {
this.initilaizeTarget();
}
// Initialize the Dialog component target element.
public initilaizeTarget: EmitType<object> = () => {
this.targetElement = this.container.nativeElement.parentElement;
}
// Sample level code to handle the button click action
public onOpenDialog = function(event: any): void {
// Call the show method to open the Dialog
this.ejDialog.show();
};
// Sample level code to hide the Dialog when click the Dialog overlay
public onOverlayClick: EmitType<object> = () => {
this.ejDialog.hide();
}
}
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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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%;
margin: 0;
overflow: hidden;
width: 100%;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
The Dialog header can be enabled by adding the header content as text or HTML content through the
header
property.
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' #ejDialog header='Dialog' showCloseIcon='true' content='This is a dialog with header'
[target]='targetElement' width='250px'> </ejs-dialog>`
})
export class AppComponent implements OnInit {
@ViewChild('ejDialog') ejDialog: 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() {
this.initilaizeTarget();
}
// Initialize the Dialog component target element.
public initilaizeTarget: EmitType<object> = () => {
this.targetElement = this.container.nativeElement.parentElement;
}
// Sample level code to handle the button click action
public onOpenDialog = function(event: any): void {
// Call the show method to open the Dialog
this.ejDialog.show();
};
}
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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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%;
margin: 0;
overflow: hidden;
width: 100%;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
The Dialog provides built-in support to render the buttons
on the footer (for ex: ‘OK’ or
‘Cancel’ buttons). Each Dialog button allows the user to perform any action while clicking on it.
The primary button will be focused automatically when open the Dialog and add the click
event to handle the actions
When the Dialog initialize with more than one primary buttons, the first primary button gets focus on open the Dialog.
The below sample render with button and its click event.
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' #ejDialog header='Dialog' content='This is a Dialog with button and primary button' [target]='targetElement'
width='250px' [buttons]='buttons'>
</ejs-dialog>
`
})
export class AppComponent implements OnInit {
@ViewChild('ejDialog') ejDialog: 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() {
this.initilaizeTarget();
}
// Initialize the Dialog component's target element.
public initilaizeTarget: EmitType<object> = () => {
this.targetElement = this.container.nativeElement.parentElement;
}
// 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',
// Enables the primary button
isPrimary: true
}
},
{
'click': this.hideDialog.bind(this),
buttonModel: {
content: 'Cancel'
}
}
];
// Sample level code to handle the button click action
public onOpenDialog = function(event: any): void {
// Call the show method to open the Dialog
this.ejDialog.show();
};
}
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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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%;
margin: 0;
overflow: hidden;
width: 100%;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
The Dialog supports to drag within its target container by grabbing the Dialog header, which allows the user to reposition the Dialog dynamically.
The Dialog can be draggable only when the Dialog header is enabled. From
16.2.x
version, enabled draggable support for modal Dialog also.
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' #ejDialog allowDragging='true' header='Dialog' content='This is a Dialog with drag enabled'
[target]='targetElement' width='250px' [buttons]='buttons'> </ejs-dialog>`
})
export class AppComponent implements OnInit {
@ViewChild('ejDialog') ejDialog: 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() {
this.initilaizeTarget();
}
// Initialize the Dialog component's target element.
public initilaizeTarget: EmitType<object> = () => {
this.targetElement = this.container.nativeElement.parentElement;
}
// 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 = function(event: any): void {
// Call the show method to open the Dialog
this.ejDialog.show();
};
}
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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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%;
margin: 0;
overflow: hidden;
width: 100%;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
The Dialog can be positioned using the position property by providing the X and Y co-ordinates. It can be positioned inside the target of the container or <body>
of the element based on the given X and Y values.
The below example demonstrates the different Dialog positions.
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'></div>
<ejs-dialog id='dialog' #ejDialog [position]='position' [target]='targetElement' width='363px'
[closeOnEscape]='closeOnEscape'>
<ng-template #header>
<span>Choose a Dialog Position</span>
</ng-template>
<ng-template #content>
<table style="width:320px;padding:18px; padding-top:0px;">
<tr>
<td><input type="radio" name="xy" (click)="changePosition($event)" value="left top"
checked="true">left top</td>
<td><input type="radio" name="xy" (click)="changePosition($event)"
value="center top">center top</td>
<td><input type="radio" name="xy" (click)="changePosition($event)" value="right top">right top</td> </tr>
<tr>
<td><input type="radio" name="xy" (click)="changePosition($event)" value="left center">left center</td>
<td><input type="radio" name="xy" (click)="changePosition($event)" value="center center">center center</td>
<td><input type="radio" name="xy" (click)="changePosition($event)" value="right center">right center</td> </tr>
<tr>
<td><input type="radio" name="xy" (click)="changePosition($event)" value="left bottom">left bottom</td>
<td><input type="radio" name="xy" (click)="changePosition($event)" value="center bottom">center bottom</td>
<td><input type="radio" name="xy" (click)="changePosition($event)" value="right bottom">right bottom</td>
</tr>
</table>
</ng-template>
<ng-template #footerTemplate>
<span id="posvalue" style="float:left; padding-left:10px;">Position: "Left", "Top"</span>
</ng-template>
</ejs-dialog>
`
})
export class AppComponent implements OnInit {
@ViewChild('ejDialog') ejDialog: 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() {
this.initilaizeTarget();
}
// Initialize the Dialog component's target element.
public initilaizeTarget: EmitType<object> = () => {
this.targetElement = this.container.nativeElement.parentElement;
}
// Set Dialog position
public position: object={ X: 'left', Y: 'top' };
// Disable the Esc key option to hide the Dialog
public closeOnEscape: boolean =false;
// Sample level code to handle the button click action
public onOpenDialog = function(event: any): void {
// Call the show method to open the Dialog
this.ejDialog.show();
}
public changePosition = function(event: any): void{
this.ejDialog.position = { X: event.currentTarget.value.split(" ")[0], Y: event.currentTarget.value.split(" ")[1] };
document.getElementById("posvalue").innerHTML = 'Position: {X: "' + event.currentTarget.value.split(" ")[0] + '", Y: "' + event.currentTarget.value.split(" ")[1] + '"}';
}
}
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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="index.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%;
}
#dialog-container {
height: 365px;
}
#dialog table,
#dialog th,
#dialog td {
border: 1px solid black;
border-collapse: collapse;
margin-left: 15px;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#dialog.e-dialog .e-footer-content {
padding: 0;
padding-left: 14px;
}
#dialog.e-dialog .e-dlg-content {
padding: 9px;
}