Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
DEMOS
SUPPORT
FORUM
DOWNLOAD
/ Dialog / Templates
Search results

Templates in Angular Dialog component

21 Dec 2022 / 3 minutes to read

In Dialog the template support is provided to the header, content and footer sections. So any text or HTML content can be appending in these sections.

The Dialog header content can be provided through the header property, and it will allow both text and any HTML content as a string. Also in header, close button is provided as built-in support, and this can be enabled through the showCloseIcon property.

The Dialog footer can be enabled by adding built-in buttons or providing any HTML string through the footerTemplate.

The buttons and footerTemplate properties can’t be used at the same time.

Content

The Dialog content can be update by providing any HTML string through the content.

The below example demonstrates the usage of header, footer and content as template in the Dialog.

Copied to clipboard
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType, isNullOrUndefined } 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' #template showCloseIcon='true' (open)="dialogOpen()" [height]='height' [target]='targetElement' width='435px'>
      <ng-template #footerTemplate>
            <input id="inVal" class="e-input" type="text" placeholder="Enter your message here!"/>
            <button id="sendButton" class="e-control e-btn e-primary sendButton" data-ripple="true">Send</button>
        </ng-template>
        <ng-template #content>
            <div class="dialogContent">
                <span class="dialogText">Greetings Nancy! When will you share me the source files of the project?</span>
            </div>
        </ng-template>
        <ng-template #header>
            <img class="img2" src="https://ej2.syncfusion.com/products/typescript/dialog/template/images/1.png" style="display: inline-block;" alt="header image"/>
            <div title="Nancy" class="e-icon-settings dlg-template"> Nancy </div>
        </ng-template>
      </ejs-dialog>
        `
})

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

    //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;
    }
    public height: string = '250px';
    public dialogOpen: EmitType<object> = () => {
        (document.getElementById('sendButton') as any).keypress = (e: any) => {
            if (e.keyCode === 13) { this.updateTextValue(); }
        };
        (document.getElementById('inVal')as HTMLElement).onkeydown = (e: any) => {
            if (e.keyCode === 13) { this.updateTextValue(); }
        };
        document.getElementById('sendButton').onclick = (): void => {
            this.updateTextValue();
        };
    }

    public updateTextValue: EmitType<object> = () => {
        let enteredVal: HTMLInputElement = document.getElementById('inVal') as HTMLInputElement;
        let dialogTextElement: HTMLElement = document.getElementsByClassName('dialogText')[0] as HTMLElement;
        let dialogTextWrap : HTMLElement = document.getElementsByClassName('dialogContent')[0] as HTMLElement;
        if (!isNullOrUndefined(document.getElementsByClassName('contentText')[0])) {
            detach(document.getElementsByClassName('contentText')[0]);
        }
        if (enteredVal.value !== '') {
            dialogTextElement.innerHTML = enteredVal.value;
        }
        enteredVal.value = '';
    }

    // Sample level code to handle the button click action
    public onOpenDialog = function(event: any): void {
        // Call the show method to open the Dialog
        this.template.show();
    }
}
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
 */
@NgModule({
    imports: [
        BrowserModule,
		DialogModule
    ],
    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';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-inputs/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>
Copied to clipboard
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%;
}

.e-dialog .e-dlg-header-content {
    background-color: #007DD1;
}
#target {
  min-height:350px;
}

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    top: 3px;
    left: -11px;
}

.e-dialog .e-dlg-header {
    position: relative;
    padding: 0;
}

.e-dialog .e-dlg-header-content {
    padding: 6px;
}
#dialog.e-dialog .e-dlg-header-content{
  padding: 13px;
}
.target-element .e-open-icon::before {
    content: '\e782';
}
.e-dialog .e-dlg-header img.img2 {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    vertical-align: middle;
    display: inline-block;
}
.e-dialog .e-dlg-header .dlg-template {
    display: inline-block;
    padding: 0px 10px;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    color: #fff;
}
.e-dialog .e-footer-content input.e-input {
    width: 75%;
    float: left;
}

.e-icon-settings.e-icons {
    float: left;
    position: relative;
    left: 14%;
    top: -33px;
}

#dialog.e-dialog .e-footer-content {
    padding: 15px;
}
.dialogContent .dialogText {
    font-size: 13px;
    padding: 5%;
    word-wrap: break-word;
    border-radius: 6px;
    text-align: justify;
    font-style: initial;
    display: block;
}
.e-dialog .e-dlg-header .e-icon-settings, .target-element .e-icon-btn {
    color: #fff;
}

.dialogContent .dialogText  {
    background-color: #f5f5f5;
}

#dialog.e-dialog .e-footer-content {
    border-top: 0.5px solid rgba(0, 0, 0, 0.42);
    padding-left: 30px;
}

.e-dialog .e-dlg-content .dialogContent {
    display: block;
    font-size: 15px;
    word-wrap: break-word;
    text-align: center;
    font-style: italic;
    border-radius: 6px;
    padding: 3%;
    position: relative;
    top: 6px;
}

.control-wrapper .e-control.e-dialog {
    width: 30%;
}
.e-dialog .e-dlg-header-content .e-icon-dlg-close {
  color: #fff;
}
.e-dialog .e-btn.e-dlg-closeicon-btn:hover span{
    color: #8ECBFF;
}
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover,
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus {
    background-color: rgba(255,255,255, 0.10);
}
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:active .e-icon-dlg-close ,
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus .e-icon-dlg-close,
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover .e-icon-dlg-close {
    color: #fff;
}

See Also

Dialog / Getting Started
Dialog / Animation