Position in Angular Predefined dialogs component
1 Dec 20226 minutes to read
Customize the dialog position by using the position
property. The position can be represented with specific X
and Y
values.
- The
PositionDataModel.X
can be configured with a left, center, right, or offset value. By default, the value is set ascenter
. - The
PositionDataModel.Y
can be configured with a top, center, bottom, or offset value. By default, the value is set ascenter
.
Alert position
import { Component, OnInit } from '@angular/core';
import { DialogUtility } from '@syncfusion/ej2-popups';
@Component({
selector: 'app-root',
template: `<button ejs-button cssClass="e-danger" #alertButton (click)="alertBtnClick()">Alert</button>`
})
export class AppComponent implements OnInit {
public alertBtnClick = (): void => {
DialogUtility.alert({
title: 'Low Battery',
content: '10% of battery remaining',
width : '250px',
position: { X: 'center', Y: 'center' }
});
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
DialogModule,
ButtonModule
],
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);
Confirm position
import { Component, OnInit } from '@angular/core';
import { DialogUtility } from '@syncfusion/ej2-popups';
@Component({
selector: 'app-root',
template: `<button ejs-button cssClass="e-success" #confirmButton (click)="confirmBtnClick()">Confirm</button>`
})
export class AppComponent implements OnInit {
public confirmBtnClick = (): void => {
DialogUtility.confirm({
title: 'Delete Multiple Items',
content: 'Are you sure you want to permanently delete these items?',
width:'300px',
position: { X: 'center', Y: 'center' }
});
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
DialogModule,
ButtonModule
],
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);
Prompt position
import { Component, OnInit } from '@angular/core';
import { DialogUtility } from '@syncfusion/ej2-popups';
@Component({
selector: 'app-root',
template: `<button ejs-button [isPrimary]="true" #promptButton (click)="promptBtnClick()">Prompt</button>`
})
export class AppComponent implements OnInit {
public promptBtnClick = (): void => {
DialogUtility.confirm({
title: 'Join Chat Group',
content:'<p>Enter your name:</p> <input id= "inputEle" type="text" name="Required" class="e-input" placeholder="Type here.." />',
width: '300px',
position: { X: 'center', Y: 'center' }
});
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
DialogModule,
ButtonModule
],
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);