You can customize the dialog appearance by providing dialog template as string or HTML element to the content property. In the following sample, dialog is customized as error window appearance.
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'>
<ejs-dialog id='dialog' #ejDialog [animationSettings]='animationSettings' header='File and Folder Rename' [target]='targetElement'
width='400px' [showCloseIcon]='showCloseIcon' [buttons]='buttons'>
<ng-template #content>
<div class = 'dialog-content'>
<div class='msg-wrapper col-lg-12'>
<span class ='e-icons close-icon col-lg-2'></span>
<span class ='error-msg col-lg-10'>Can not rename 'pictures' because a file or folder with that name already exists </span>
</div>
<div class ='error-detail col-lg-8'>
<span>Specify a different name</span>
</div>
</div>
</ng-template>
</ejs-dialog> </div> `
})
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.
initilaizeTarget: EmitType<object> = () => {
this.targetElement = this.container.nativeElement.parentElement;
}
//Animation options
public animationSettings: Object = { effect: 'Zoom', duration: 400, delay: 0 };
public showCloseIcon: boolean = true;
// 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:'Close',
//Enables the primary button
isPrimary: true
}
}
];
// 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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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.4.38/ej2-base/styles/bootstrap.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/bootstrap.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/bootstrap.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%;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.row {
padding: 10px 3px;
}
span.close-icon {
width: 24px;
height: 24px;
position: relative;
/* background-color: yellow; */
display: inline-block;
}
span.error-msg {
color: #66afe9;
display: inline-block;
position: relative;
top: -29px;
left: 32px;
}
.error-detail.col-lg-8 {
position: relative;
left: 45px;
margin: 0px 0px 21px;
}
.e-icons.close-icon.col-lg-2:before {
content: '\e7e9';
font-size: 26px;
color:#d9534f;
position: relative;
left: -12px;
}
.e-dialog .e-footer-content {
background-color: #f8f8f8;
}
.e-dialog.e-control.e-popup, .e-dialog.e-control.e-popup .e-dlg-header-content {
background-color: #d9edf7;
}
.e-dialog.e-control.e-popup {
padding:3px;
}
.e-dialog.e-control .e-dlg-header-content {
padding: 10px;
}
.e-dialog.e-control .e-footer-content {
padding: 8px 12px;
}
.e-dialog.e-control .e-dlg-content {
padding: 15px 0px 0px;
}