By default, the dialog focuses on the first elements of the content area which can be active and focusable. You can prevent this default focusing behavior using the open event and by enabling the preventFocus
argument.
Bind the open event and enable the preventFocus argument within an event like the below sample.
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'></div>
<ejs-dialog id='dialog' #ejDialog header='Sign In' [buttons]='buttons' [target]='targetElement' width='300px' (open)="onOpen($event)">
<ng-template #content>
<div class='form-group'><label for='email'>Email:</label>
<input type='email' class='form-control' id='email'>
</div>
<div class='form-group'>
<label for='comment'>Password:</label>
<input type='password' class='form-control' id='password'>
</div>
</ng-template>
</ejs-dialog>`
})
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 target element.
public initilaizeTarget: EmitType<object> = () => {
this.targetElement = this.container.nativeElement.parentElement;
}
// 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();
};
public onOpen(args: any): void {
//Preventing the default dialog focus
args.preventFocus = true;
}
// Enables the footer buttons
public buttons: Object = [
{
'click': this.hideDialog.bind(this),
// Accessing button component properties by buttonModel property
buttonModel:{
content: 'OK',
// Enables the primary button
isPrimary: true
}
},
{
'click': this.hideDialog.bind(this),
buttonModel: {
content: 'Cancel'
}
}
];
// Hide the Dialog when click the footer button.
public hideDialog: EmitType<object> = () => {
this.ejDialog.hide();
}
}
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/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" />
<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%;
margin: 0;
overflow: hidden;
width: 100%;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}