Getting Started

23 Nov 20164 minutes to read

This section helps you to understand the getting started of the Dialog component with the step-by-step instructions.

Create a Dialog Component

• To create Syncfusion Aurelia application refer Aurelia Getting Started Documentation.
• Create dialog folder inside src/samples location.
• Create dialog.html file inside src/samples/dialog folder and use the below code for rendering Dialog component.

HTML

<template>
    <ej-dialog id="basicDialog" e-title="Audi Q3 Drive" e-width="550" e-min-width="310" e-min-height="215">
    </ej-dialog>
    </template>

• Create dialog.js file inside src/samples/dialog folder with below code snippet.

JAVASCRIPT

export class BasicUse {
    constructor() {    
    }
    }

This will render an empty Dialog control on executing.

Add dialog content

You can add the content to Dialog Control. Refer the below code for adding content in dialog component.

HTML

<ej-dialog id="basicDialog" e-title="Audi Q3 Drive" e-width="550" e-min-width="310" e-min-height="215" e-containment=".control">
    <h1>Audi Q3</h1>
    <div class="content">
            This is a simple dialog.
    </div>
    </ej-dialog>

Run the above code and output renders as follows,

Set the title

You can set Dialog control title as follows.

HTML

<ej-dialog id="basicDialog" e-title="Dialog" e-width="550" e-min-width="310" e-min-height="215" e-containment=".control">
        <h1>Audi Q3</h1>
        <div class="content">
                This is a simple dialog.
        </div>
    </ej-dialog>

Run the above code and your output will be,

Open Dialog dynamically

In most cases, the Dialog control are needed only in dynamic actions like showing some messages on clicking a button, to provide alert, etc. So the Dialog control provides “open” and “close” methods to open/close the dialogs dynamically.
The Dialog control can be hidden on initialize using e-show-on-init property which should be set to false.

Use the below code in the html file. The dialog will be opened on clicking the Button control.

HTML

<button id="btnOpen" class="e-btn" ej-button="e-text:Click to open dialog; size: medium, type: button, height: 30, width: 150" e-on-click.trigger="onOpen()"></button>
    <ej-dialog id="basicDialog" e-title="Audi Q3 Drive" e-width="550" e-min-width="310" e-min-height="215" e-show-on-init=false e-containment=".control" e-on-close.trigger="onDialogClose()">
        <h1>Audi Q3</h1>
        <div class="content">
        This is a simple dialog.
        </div>
    </ej-dialog>

Add the following in the script section.

JAVASCRIPT

export class BasicUse {
        onOpen(args) {
            $('#btnOpen').hide();
            $('#basicDialog').ejDialog('open');
        }
        onDialogClose(args) {
            $('#btnOpen').show();
        }
    }

Run the above code, you get the output as below,

Note: You can find the Dialog properties from the API reference document