Read all the values from dialog on button click in Angular Dialog component
27 Sep 20239 minutes to read
You can read the dialog element values by binding the action handler to the footer buttons. The buttons property provides the options to bind events to the action buttons.
For detailed information about buttons , refer to the footer section.
In the below sample, value of input elements within the dialog has been checked in the footer button click event and send the values as the content of confirmation 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 Dialog</button>
<div #container class='root-container'>
<ejs-dialog id='dialog' #ejDialog header='User details' width='400px' [buttons]='buttons' [visible]='visible1' showCloseIcon='true' [target]='targetElement' [animationSettings]='dialogAnimation' [closeOnEscape]='closeOnEscape'>
<ng-template #content>
<form>
<div class='form-group'>
<label for='name'>Name:</label>
<input type='name' class='form-control' id='name' />
</div>
<div class='form-group'>
<label for='email'>Email Id:</label>
<input type='email' placeholder='user@syncfusion.com' class='form-control' id='email' />
</div>
<div class='form-group'>
<label for='contact'>Contact Number:</label>
<input type='contact' class='form-control' id='contact' />
</div>
<div class='form-group'><label for='address'>Address:</label>
<textarea class='form-control' rows='2' id='address'></textarea>
</div>
</form>
</ng-template>
</ejs-dialog>
<ejs-dialog id='innerDialog' #ejInnerDialog header='User details' [animationSettings]='animationSettings' [isModal]='isModal' width='400px' [visible]='visible' showCloseIcon='true' content='This is a Nested Dialog' [target]='targetElement' [animationSettings]='dialogAnimation' [closeOnEscape]='closeOnEscape'>
</ejs-dialog> </div> `
})
export class AppComponent implements OnInit {
@ViewChild('ejDialog') ejDialog: DialogComponent | undefined;
@ViewChild('ejInnerDialog') ejInnerDialog: DialogComponent | undefined;
// Create element reference for dialog target element.
@ViewChild('container', { read: ElementRef }) container: ElementRef | undefined;
// 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();
}
public isModal: boolean = true;
public visible: boolean = false;
public visible1: boolean = false;
// Initialize the Dialog component target element.
public initilaizeTarget: EmitType<object> = () => {
this.targetElement = this.container!.nativeElement.parentElement;
}
// Dialog animation
public dialogAnimation: Object= { effect: 'Zoom', duration: 400, delay: 0 };
public animationSettings: Object = { effect: 'Zoom', duration: 400, delay: 0 };
// Disable the Esc key option to hide the Dialog
public closeOnEscape: boolean =false;
// Dialog header template content
header: string='<div title="Installation Complete" class="e-icon-settings e-icons" style="padding: 3px;"> Installation Complete</div>';
// Dialog footer template content
footerTemplate: string='<span style="float: left;font-size: 14px;padding-left: 15px;color: rgba(0, 0, 0, 0.54);">Click the close button to Exit</span>';
// Sample level code to handle the button click action
public onOpenDialog = (event: any): void => {
this.ejDialog!.show();
}
public getDynamicContent: EmitType<object> = () => {
let input: HTMLInputElement = document.getElementById('dialog')!.querySelector('#name') as HTMLInputElement;
let email: HTMLInputElement = document.getElementById('dialog')!.querySelector('#email') as HTMLInputElement;
let contact: HTMLInputElement = document.getElementById('dialog')!.querySelector('#contact') as HTMLInputElement;
let address: HTMLTextAreaElement = document.getElementById('dialog')!.querySelector('#address') as HTMLTextAreaElement;
let template: string = "<div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><b>Confirm your details</b></div>" +
"</div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='name'> Name: </span>" +
"</div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='nameValue'>"+ input.value + "</span> </div></div>" +
"<div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='email'> Email: </span>" +
"</div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='emailValue'>" + email.value +
"</span></div></div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>"+
"<span id='Contact'> Contact number: </span></div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>"+
"<span id='contactValue'>"+ contact.value +" </span></div></div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>"+
"<span id='Address'> Address: </span> </div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='AddressValue'>" + address.value +"</span></div></div>"
return template;
}
public nestedbuttonClick: EmitType<object> = () => {
this.ejInnerDialog!.hide();
this.ejDialog!.show();
}
public footerbuttonclick: EmitType<object> = () => {
this.ejInnerDialog!.hide();
}
public onOpenInnerDialog: EmitType<object> = () => {
this.ejDialog!.hide();
this.ejInnerDialog!.content = this.getDynamicContent();
this.ejInnerDialog!.buttons = [{click: this.footerbuttonclick.bind(this), buttonModel: { content: 'Yes', isPrimary: true }},
{click: this.nestedbuttonClick.bind(this), buttonModel: { content: 'No', isPrimary: true }}];
this.ejInnerDialog!.show();
}
// Enables the footer buttons
public buttons: Object = [
{
'click': this.onOpenInnerDialog.bind(this),
// Accessing button component properties by buttonModel property
buttonModel:{
content:'Submit',
//Enables the primary button
isPrimary: true
}
}
];
}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';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);