Render a Dialog using ng-content in Angular Dialog component

You can render your own custom component to the dialog content. The below example shows that rendering child element in your custom component, by using ng-content.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.html

index.css

import { Component, ViewChild } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
@Component({
  selector: 'app-root',
  template: `<div class="control-section">
  <button class="e-btn" id='dlgbtn' #ButtonInstance (click)="BtnClick()">Open</button>
     <!-- Render Button to open the Dialog -->
     <ejs-dialog #Dialog [buttons]='dlgButtons' [header]='header' [animationSettings]='animationSettings' [showCloseIcon]='showCloseIcon' [width]='width' (open)="dialogOpen()"
         (close)="dialogClose()">
         <app-ng-content>
         <span> 10% of battery remaining </span>
         </app-ng-content>
     </ejs-dialog>
 </div>`
})

export class AppComponent {
  @ViewChild('Dialog')
    public Dialog: DialogComponent;
    public showCloseIcon: Boolean = true;
    public width: string = '50%';
    public animationSettings: Object = { effect: 'None' };
    public header: string = 'Low Battery';
    BtnClick() {
        this.Dialog.show();
    }
    dialogClose() {
        document.getElementById('dlgbtn').style.display = 'block';
        }
    // On Dialog open, 'Open' Button will be hidden
    dialogOpen() {
        document.getElementById('dlgbtn').style.display = 'none';
    }
    public dlgButtons: Object[] = [{
        click: this.dlgBtnClick.bind(this),
        buttonModel: { content: 'OK', isPrimary:'true' } },
        { click: this.dlgBtnClick.bind(this), buttonModel: { content: 'Cancel' }
      }];

    dlgBtnClick() {
    this.Dialog.hide();
    }
}

@Component({
  selector: 'app-ng-content',
  template: `<div class="dialog-content-wrapper">
      <ng-content></ng-content>
</div>`
})
export class NgContentComponent {

}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent, NgContentComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
		DialogModule
    ],
    declarations: [AppComponent, NgContentComponent],
    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" />
    <link href="//cdn.syncfusion.com/ej2/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>

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

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!