Search results

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