Animation

The Dialog component can be animated while opening and closing the dialog.

We can specify the effect and the duration for the animation. The two types of effects of Dialog are slide and fade. We can configure these settings separately for open and close dialog actions.

Add the following code in HTML page.

  • html
  • <ej-dialog id="dialog" title="Dialog" [actionButtons]="Icons" [animation]="animation">
            This is a dialog
        </ej-dialog>

    Add the following code in constructor file.

  • javascript
  • export class AppComponent {
            Icons:any;
            animation:object;
            constructor() {
                this.Icons=["close", "maximize", "minimize"];
                this.animation={show: {effect: "slide",duration: 500},hide: {effect: "fade",duration: 500}};
        }

    Animation

    Loading Dialog content

    By default, the content inside the Dialog element is simply the user given content. But also, we can render the Dialog’s component content through the following ways.

    1. AJAX

    2. Using iframe

    3. iImage

    This settings can be specified through contentType property.

    AJAX

    We can load the content through AJAX by setting the contentType property as ajax.

    Add the following code in HTML page.

  • html
  • <ej-dialog id="dialog" title="Dialog" [contentUrl]="contentUrl" [contentType]="contentType">
        </ej-dialog>

    The content of that dialogContent.html file is below:

    <div id=”content”> This content is loaded via AJAX request. </div>

    Add the following code in constructor file.

  • javascript
  • export class AppComponent {
            contentUrl:any;
            contentType:any;
            constructor() {
                this.contentUrl="dialogContent.html";
                this.contentType="ajax";
        }

    Load content

    We can handle the AJAX request’s success and failures through the events “ajaxSuccess” and “ajaxError” events respectively. See also ajaxSuccess and ajaxError

    The previous example is modified as below to handle the success and failure events.

  • html
  • <ej-dialog id="dialog" title="Dialog" [contentUrl]="contenturl" [contentType]="contenttype" (ajaxSuccess)="onSuccess($event)" (ajaxError)="onError($event)">
        </ej-dialog>

    Iframe

    We can also load the content in iframe by setting the contentType property as iframe.

    Add the following code in HTML page.

  • html
  • <ej-dialog id="dialog" title="Dialog" [contentUrl]="contentUrl" [contentType]="contentType">
        </ej-dialog>

    Add the following code in constructor file.

  • javascript
  • export class AppComponent {
            contentUrl:any;
            contentType:any;
            constructor() {
                this.contentUrl="dialogContent.html";
                this.contentType="iframe";
        }

    Frame

    Image

    We can also load an image as the content by setting the contentType property as image

    Add the following code in HTML page.

  • html
  • <ej-dialog id="dialog" title="Dialog" [contentUrl]="contentUrl" [contentType]="contentType">
        </ej-dialog>

    Add the following code in constructor file.

  • javascript
  • export class AppComponent {
            contentUrl:any;
            contentType:any;
            constructor() {
                this.contentUrl=" http://js.syncfusion.com/demos/web/content/images/twitter.jpg";
                this.contentType="image";
        }

    Animation