Getting Started with EJ 1 Angular Dialog

4 Oct 20173 minutes to read

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

Getting Started with EJ 1 Angular Dialog

4 Oct 20173 minutes to read

The following steps guide you to add a Dialog control.

1) To get start with how to use the Dialog component within Angular-2 platform, refer the basic requisites and the configurations needs to be done on the system from here.

2) Create a simple Dialog by adding ej-dialog attribute for initializing a Dialog component on the application.

  • javascript
  • <ej-dialog id="basicDialog">
            
           </ej-dialog>

    To get the following output from the above-mentioned code.

    ![](getting-started-images\getting-started-img1

    Add dialog content

    Add the below code to render dialog component with content.

  • javascript
  • <ej-dialog id="basicDialog" >
                 This is a simple dialog
            </ej-dialog>

    To get the following output from the above-mentioned code

    ![](getting-started-images\getting-started-img2

    Set the title

    To set the dialog component title as using the below mentioned code.

  • javascript
  • <ej-dialog id="basicDialog" title="Dialog">
                This is a simple dialog
           </ej-dialog>

    To get the following output from the above-mentioned code.

    ![](getting-started-images\getting-started-img3

    Open Dialog dynamically

    In most cases, the Dialog components are needed only in dynamic actions like showing some messages on clicking a button, to provide alert, etc. So, the Dialog component provides “open” and “close” methods to open/close the dialogs dynamically.
    The Dialog Component can be hidden on initialize using showOnInit property which should be set to false.
    The dialog will be opened on clicking the Button component. Refer to the below mentioned code.

  • javascript
  • <div id="parent">
        <input id="btnOpen" style="display:block; height: 30px" type="button" class="ejinputtext" value="Click to open Dialog" (click)="onClick($event)" />
        <ej-dialog id="basicDialog" title="Dialog" (close)="onClose($event)" [showOnInit]="showoninit">
            This is a simple dialog
        </ej-dialog>
    </div>

    Add the following code in the component’s constructor file.

  • javascript
  • export class AppComponent {
        showoninit: boolean;
        constructor() {
            this.showoninit = false;
        }
        onClick(event) {
            $("#basicDialog").ejDialog("open");
        }
        onClose(event) {
            $("#btnOpen").show();
        }
    }

    To get the following output from the above-mentioned code.

    ![](getting-started-images\getting-started-img4

    NOTE

    You can find the Dialog component properties from the API reference