chore(*): fix dialog issues

Author: dobromirts

projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts

@@ -26,7 +26,8 @@ describe('Dialog', () => {
                 CustomTemplates1DialogComponent,
                 CustomTemplates2DialogComponent,
                 DialogSampleComponent,
-                PositionSettingsDialogComponent
+                PositionSettingsDialogComponent,
+                DialogTwoWayDataBindingComponent
             ],
             imports: [BrowserAnimationsModule, NoopAnimationsModule, IgxDialogModule]
         }).compileComponents();
@@ -80,17 +81,40 @@ describe('Dialog', () => {
         expect(messageDebugElement.nativeElement.textContent.trim()).toEqual(expectedMessage);
     });
 
-    it('Should open dialog when opened property is set to true', () => {
+    it('Should open and close dialog when set values to IsOpen', fakeAsync(() => {
         const fixture = TestBed.createComponent(AlertComponent);
         const dialog = fixture.componentInstance.dialog;
         const expectedMessage = 'message';
 
-        dialog.opened = true;
+        dialog.isOpen = true;
+        tick();
         fixture.detectChanges();
+        expect(dialog.isOpen).toEqual(true);
 
-        const messageDebugElement = fixture.debugElement.query(By.css('.igx-dialog__window-content'));
-        expect(messageDebugElement.nativeElement.textContent.trim()).toEqual(expectedMessage);
-    });
+        dialog.close();
+        tick();
+        fixture.detectChanges();
+        expect(dialog.isOpen).toEqual(false);
+    }));
+
+    it('Should open and close dialog with isOpen two way data binding', fakeAsync(() => {
+        const fixture = TestBed.createComponent(DialogTwoWayDataBindingComponent);
+        const dialog = fixture.componentInstance.dialog;
+        fixture.detectChanges();
+
+        fixture.componentInstance.myDialog = true;
+
+        fixture.detectChanges();
+        tick();
+        expect(dialog.isOpen).toEqual(true);
+
+
+        fixture.componentInstance.myDialog = false;
+
+        fixture.detectChanges();
+        tick();
+        expect(dialog.isOpen).toEqual(false);
+    }));
 
     it('Should set custom modal message.', () => {
         const fixture = TestBed.createComponent(CustomDialogComponent);
@@ -322,6 +346,7 @@ describe('Dialog', () => {
         dialog.open();
         tick(100);
         fix.detectChanges();
+        tick(100);
 
         // Verify dialog is opened and its default right button is focused
         const dialogDOM = fix.debugElement.query(By.css('.igx-dialog'));
@@ -448,6 +473,28 @@ class AlertComponent {
 class DialogComponent {
     @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
 }
+
+@Component({
+    template: `<div #wrapper>
+                            <igx-dialog #dialog title="dialog" message="message"
+                                [(isOpen)]="myDialog"
+                                leftButtonLabel="left button"
+                                leftButtonType="raised"
+                                leftButtonColor="black"
+                                leftButtonBackgroundColor="darkblue"
+                                leftButtonRipple="pink"
+                                rightButtonLabel="right button"
+                                rightButtonType="raised"
+                                rightButtonColor="orange"
+                                rightButtonBackgroundColor="lightblue"
+                                rightButtonRipple="white">
+                            </igx-dialog>
+                        </div>` })
+class DialogTwoWayDataBindingComponent {
+    @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
+    public myDialog = false;
+}
+
 @Component({
     template: `<div #wrapper>
                             <igx-dialog #dialog

projects/igniteui-angular/src/lib/dialog/dialog.component.ts

@@ -58,6 +58,8 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     private static NEXT_ID = 1;
     private static readonly DIALOG_CLASS = 'igx-dialog';
 
+
+    
     @ViewChild(IgxToggleDirective, { static: true })
     public toggleRef: IgxToggleDirective;
 
@@ -316,6 +318,11 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     @Output()
     public onRightButtonSelect = new EventEmitter<IDialogEventArgs>();
 
+    /**
+     * @hidden
+     */
+    @Output() public isOpenChange = new EventEmitter<boolean>();
+
     private _positionSettings: PositionSettings = {
         openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
         closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } })
@@ -359,44 +366,38 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     }
 
     /**
-     * Returns whether the dialog is visible to the end user.
+     * State of the dialog.
+     *
      * ```typescript
-     * @ViewChild("MyDialog")
-     * public dialog: IgxDialogComponent;
-     * ngAfterViewInit() {
-     *     let dialogOpen = this.dialog.isOpen;
-     * }
+     * * // get
+     * let dialogIsOpen = this.dialog.isOpen;
      * ```
-     */
-
-    get isOpen() {
-        return !this.toggleRef.collapsed;
-    }
-
-
-    /**
-     * An @Input property that allows you to open the dialog declaratively.
-     * ```typescript
-     * @ViewChild("MyDialog")
-     * public dialog: IgxDialogComponent;
-     * ngAfterViewInit() {
-     *     this.dialog.opened=true;
-     * }
+     *
+     * ```html
+     * <!--set-->
+     * <igx-dialog [isOpen]='false'></igx-dialog>
      * ```
      *
+     * Two-way data binding.
      * ```html
      * <!--set-->
-     * <igx-dialog [opened]='true'></igx-dialog>
+     * <igx-dialog [(isOpen)]='model.isOpen'></igx-dialog>
      * ```
      */
-    @Input()
-    public set opened(value: boolean) {
+
+    public get isOpen() {
+        return !this.toggleRef.collapsed;
+    }
+    public set isOpen(value: boolean) {
+
+        this.isOpenChange.emit(value);
         if (value) {
-            this.open(this._overlayDefaultSettings);
+            this.open();
+        } else {
+            this.close();
         }
     }
 
-
     @HostBinding('class.igx-dialog--hidden')
     get isCollapsed() {
         return this.toggleRef.collapsed;