Having trouble getting help?
Contact Support
Contact Support
Animation in Angular Dialog component
27 Apr 20244 minutes to read
The Dialog can be animated during the open and close actions. Also, user can customize animation’s delay
, duration
and effect
.
delay | The Dialog animation will start with the mentioned delay |
duration | Specifies the animation duration to complete with one animation cycle |
effect |
Specifies the animation effects of Dialog open and close actions effect.
List of supported animation effects: 'Fade' | 'FadeZoom' | 'FlipLeftDown' | 'FlipLeftUp' | 'FlipRightDown' | 'FlipRightUp' | 'FlipXDown' | 'FlipXUp' | 'FlipYLeft' | 'FlipYRight' | 'SlideBottom' | 'SlideLeft' | 'SlideRight' | 'SlideTop' | 'Zoom'| 'None' If the user sets ‘Fade’ effect, then the Dialog will open with ‘FadeIn’ effect and close with ‘FadeOut’ effect |
In the below sample, Zoom
effect is enabled. So, The Dialog will open with ZoomIn
and close with ZoomOut
effects.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';
@Component({
imports: [
DialogModule
],
standalone: true,
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='Dialog' content='Dialog enabled with Zoom effect' [target]='targetElement'
[animationSettings]='animationSettings' width='250px' [buttons]='buttons'>
</ejs-dialog>
`
})
export class AppComponent implements OnInit {
@ViewChild('ejDialog') ejDialog: DialogComponent | any;
// Create element reference for dialog target element.
@ViewChild('container', { read: ElementRef }) container: ElementRef | any;
// 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;
}
// Hide the Dialog when click the footer button.
public hideDialog: EmitType<object> = () => {
this.ejDialog.hide();
}
// Sample level code to handle the button click action
public onOpenDialog = (event:any): void => {
// Call the show method to open the Dialog
this.ejDialog.show();
}
//Animation options
public animationSettings: Object = { effect: 'Zoom', duration: 400, delay: 0 };
// Enables the footer buttons
public buttons: Object = [
{
'click': this.hideDialog.bind(this),buttonModel:{ content:'OK', isPrimary: true }
},
{
'click': this.hideDialog.bind(this),buttonModel:{ content:'Cancel' }
}
];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));