feature(EJ2-3071): EJ2-3071 showOnInit API changed to visible

Author: pipeline

src/dialog/ajax.component.ts

@@ -26,7 +26,6 @@ export class AjaxDialogComponent implements OnInit{
     }
     ngAfterViewInit():void{
         document.getElementById('ajaxBtn').focus();
-        this.dialog.show();
     }
     public header: string = 'Twitter';
     public content: string = this.ajaxData;

src/dialog/basic.component.ts

@@ -21,6 +21,8 @@ export class DefaultDialogComponent {
     public alertContent: string = '10% of battery remaining';
     public confirmContent: string = '<span>Are you sure you want to permanently delete all of these items?</span>';
     public showCloseIcon: Boolean = false;
+    public visible: Boolean = true;
+    public hidden: Boolean = false;
     public confirmCloseIcon: Boolean = true;
     public target: string = '.control-section';
     public alertWidth: string = '250px';
@@ -30,7 +32,6 @@ export class DefaultDialogComponent {
     public hide: any;
     ngAfterViewInit():void{
         document.getElementById('alertbtn').focus();
-        this.alertDialog.show();
         document.getElementById('password').addEventListener("focus", function () {
             this.parentElement.classList.add('e-input-focus');
         });

src/dialog/basic.html

@@ -5,15 +5,15 @@
 
     <button ej-button class='dlgbtn' #promptButton (click)="promptBtnClick()">Prompt</button>
 
-    <ej-dialog #alertDialog [buttons]='alertDlgButtons' [header]='alertHeader' [animationSettings]='animationSettings' [content]='alertContent' [showCloseIcon]='showCloseIcon' (open)="dialogOpen()" (close)="dialogClose()" [target]='target'
+    <ej-dialog #alertDialog [buttons]='alertDlgButtons' [visible]='visible' [header]='alertHeader' [animationSettings]='animationSettings' [content]='alertContent' [showCloseIcon]='showCloseIcon' (open)="dialogOpen()" (close)="dialogClose()" [target]='target'
         [width]='alertWidth'>
     </ej-dialog>
 
-    <ej-dialog #confirmDialog [buttons]='confirmDlgButtons' [header]='confirmHeader' [animationSettings]='animationSettings' [content]='confirmContent' [showCloseIcon]='confirmCloseIcon' (open)="dialogOpen()" (close)="dialogClose()" [target]='target'
+    <ej-dialog #confirmDialog [buttons]='confirmDlgButtons' [visible]='hidden' [header]='confirmHeader' [animationSettings]='animationSettings' [content]='confirmContent' [showCloseIcon]='confirmCloseIcon' (open)="dialogOpen()" (close)="dialogClose()" [target]='target'
         [width]='confirmWidth'>
     </ej-dialog>
 
-    <ej-dialog #promptDialog [buttons]='promptDlgButtons' [header]='promptHeader' [animationSettings]='animationSettings' [showCloseIcon]='showCloseIcon' [target]='target' (open)="dialogOpen()" (close)="dialogClose()" [width]='promptWidth'>
+    <ej-dialog #promptDialog [buttons]='promptDlgButtons' [visible]='hidden' [header]='promptHeader' [animationSettings]='animationSettings' [showCloseIcon]='showCloseIcon' [target]='target' (open)="dialogOpen()" (close)="dialogClose()" [width]='promptWidth'>
         <table style="border-collapse: separate;border-spacing: 10px;width:100%;padding: 0px 20px 20px;">
             <tr>
                 <td>SSID:</td>

src/dialog/modal.component.ts

@@ -21,7 +21,6 @@ export class ModalDialogComponent {
     public hide: any;
     ngAfterViewInit():void{
         document.getElementById('modalbtn').focus();
-        this.modalDialog.show();
     }
     modalBtnClick() {
         this.modalDialog.show();

src/dialog/rtl.component.ts

@@ -23,7 +23,6 @@ export class RTLDialogComponent {
     public hide: any;
     ngAfterViewInit():void{
         document.getElementById('rtlbtn').focus();
-        this.rtlDialog.show();
     }
     dialogClose() {
         document.getElementById('rtlbtn').style.display = '';