fix #139 change from Promise to Observable

Author: mseemann

CHANGELOG.md

@@ -11,6 +11,7 @@
 * [112](https://github.com/mseemann/angular2-mdl/issues/112) (ViewEncapsulation.None for all components)
 * [111](https://github.com/mseemann/angular2-mdl/issues/111) (forRoot module)
 * [131](https://github.com/mseemann/angular2-mdl/issues/131) (Dialog design)
+* [139](https://github.com/mseemann/angular2-mdl/issues/139) (change return types from Promise to Observable)
 
 ### Breaking Changes
 * The distribution structure has change:
@@ -22,9 +23,9 @@
       - use `MdlDialogOutletService` and `setDefaultViewContainerRef`
       - use the `<dialog-outlet></dialog-outlet>` component. This component can be anywhere in your html site. The best place is the last child of the `body` element. (see https://github.com/mseemann/angular2-mdl/wiki/How-to-use-the-MdlDialogService for more information)
     - The possibility to set a `ViewContainerRef` for each dialog or snackbar has been removed.
-    - `alert` and `confirm` return an `Observable` and no longer a `Promise` (the enum `ConfirmResult` has been removed)
+    - `alert` and `confirm` , `showDialog*` return an `Observable` and no longer a `Promise` (the enum `ConfirmResult` has been removed)
 * This version now supports AOT - but you should be aware that AOT seems not to be ready for production. AOT behaves in many cases different then JIT. (see https://github.com/angular/angular/issues/11606)
-      
+* The MdlSnachbarService returns now an Observable and no longer a Promise. Just change from `then` to `subscribe`.
 
 <a name="1.8.2"></a>
 # 1.8.2 (2016-10-06)

src/lib/components/dialog/mdl-dialog.component.spec.ts

@@ -29,7 +29,7 @@ describe('MdlDialog (embedded/declarative)', () => {
     spyOn(fixture.componentInstance, 'onDialogShow').and.callThrough();
     spyOn(fixture.componentInstance, 'onDialogHide');
 
-    dialog.show().then( () => {
+    dialog.show().subscribe( () => {
 
       dialog.close();
 

src/lib/components/dialog/mdl-dialog.component.ts

@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 import { MdlDialogService, MdlDialogReference } from './mdl-dialog.service';
 import { BooleanProperty } from './../common/boolean-property';
+import { Observable } from 'rxjs';
 
 
 
@@ -33,15 +34,15 @@ export class MdlDialogComponent {
   constructor(private dialogService: MdlDialogService) {}
 
 
-  public show(): Promise<MdlDialogReference> {
+  public show(): Observable<MdlDialogReference> {
 
     if(this.isShown){
       throw new Error('Only one instance of an embedded mdl-dialog can exist!');
     }
     this.isShown = true;
 
     let p = this.dialogService.showDialogTemplate(this.template, {isModal: this.modal});
-    p.then( (dialogRef: MdlDialogReference) => {
+    p.subscribe( (dialogRef: MdlDialogReference) => {
 
       this.dialogRef = dialogRef;
       this.showEmitter.emit(dialogRef);

src/lib/components/dialog/mdl-dialog.service.ts

@@ -136,7 +136,7 @@ export class MdlDialogService {
   /**
    * Shows a dialog that is specified by the provided configuration.
    * @param config The simple dialog configuration.
-   * @returns A promise that returns the MdlDialogReference.
+   * @returns An Observable that returns the MdlDialogReference.
    */
   public showDialog(config: IMdlSimpleDialogConfiguration): Observable<MdlDialogReference> {
 
@@ -186,7 +186,7 @@ export class MdlDialogService {
     return Observable.of(internalDialogRef.dialogRef);
   }
 
-  public showDialogTemplate(template: TemplateRef<any>, config: IMdlDialogConfiguration): Promise<MdlDialogReference> {
+  public showDialogTemplate(template: TemplateRef<any>, config: IMdlDialogConfiguration): Observable<MdlDialogReference> {
 
     let internalDialogRef = new InternalMdlDialogReference();
 
@@ -197,7 +197,7 @@ export class MdlDialogService {
 
     hostComponentRef.instance.dialogTarget.createEmbeddedView(template);
 
-    return Promise.resolve(internalDialogRef.dialogRef);
+    return Observable.of(internalDialogRef.dialogRef);
   }
 
 

src/lib/components/snackbar/mdl-snackbar.service.spec.ts

@@ -43,7 +43,7 @@ describe('Service: MdlSnackbar', () => {
     });
 
     fixture.detectChanges();
-    p.then( (mdlSnackbarComponent) => {
+    p.subscribe( (mdlSnackbarComponent) => {
 
       expect(mdlSnackbarComponent.isActive()).toBe(true);
       mdlSnackbarComponent.onClick();
@@ -62,7 +62,7 @@ describe('Service: MdlSnackbar', () => {
 
       fixture.detectChanges();
 
-      p.then( (mdlSnackbarComponent) => {
+      p.subscribe( (mdlSnackbarComponent) => {
 
         expect(mdlSnackbarComponent.isActive()).toBe(true);
 

src/lib/components/snackbar/mdl-snackbar.service.ts

@@ -11,6 +11,7 @@ import {
 import { CommonModule } from '@angular/common';
 import { MdlDialogOutletService } from '../dialog-outlet/mdl-dialog-outlet.service';
 import { MdlDialogOutletModule } from '../dialog-outlet/index';
+import { Observable, Subject } from 'rxjs';
 
 
 const ANIMATION_TIME = 250;
@@ -39,29 +40,35 @@ export class MdlSnackbarComponent {
     return this.showIt;
   }
 
-  public show(): Promise<void> {
-
-    return new Promise<void>((resolve, reject) => {
+  public show(): Observable<void> {
+    let result: Subject<any> = new Subject();
       // wait unit the dom is in place - then showIt will change the css class
       setTimeout(() => {
         this.showIt = true;
         // fire after the view animation is done
         setTimeout(() => {
-          resolve();
+          result.next(null);
+          result.complete();
         }, ANIMATION_TIME);
       }, 10);
-    });
 
+
+    return result.asObservable();
   }
 
-  public hide(): Promise<void> {
+  public hide(): Observable<void> {
     this.showIt = false;
-    return new Promise<void>(function(resolve, reject) {
-      // fire after the view animation is done
-      setTimeout(() => {
-        resolve();
-      }, ANIMATION_TIME);
-    });
+
+    let result: Subject<any> = new Subject();
+
+    // fire after the view animation is done
+    setTimeout(() => {
+      result.next(null);
+      result.complete();
+    }, ANIMATION_TIME);
+
+
+    return result.asObservable();
   }
 }
 
@@ -88,14 +95,14 @@ export class MdlSnackbarService {
   }
 
 
-  public showToast(message: string, timeout?: number, vcRef?: ViewContainerRef): Promise<MdlSnackbarComponent> {
+  public showToast(message: string, timeout?: number, vcRef?: ViewContainerRef): Observable<MdlSnackbarComponent> {
     return this.showSnackbar({
       message: message,
       timeout: timeout
     });
   }
 
-  public showSnackbar(snackbarMessage: IMdlSnackbarMessage): Promise<MdlSnackbarComponent> {
+  public showSnackbar(snackbarMessage: IMdlSnackbarMessage): Observable<MdlSnackbarComponent> {
 
     let optTimeout        = snackbarMessage.timeout || 2750;
     let viewContainerRef  = this.dialogOutletService.viewContainerRef;
@@ -118,22 +125,25 @@ export class MdlSnackbarService {
     if (snackbarMessage.action) {
       mdlSnackbarComponent.actionText = snackbarMessage.action.text;
       mdlSnackbarComponent.onAction = () => {
-        mdlSnackbarComponent.hide().then(() => {
+        mdlSnackbarComponent.hide().subscribe(() => {
           cRef.destroy();
           snackbarMessage.action.handler();
         });
       };
     } else {
       setTimeout( () => {
-        mdlSnackbarComponent.hide().then(() => {cRef.destroy(); });
+        mdlSnackbarComponent.hide().subscribe(() => {cRef.destroy(); });
       }, optTimeout);
     }
 
+    let result: Subject<MdlSnackbarComponent> = new Subject<MdlSnackbarComponent>();
 
-    return mdlSnackbarComponent.show().then( () => {
-      return mdlSnackbarComponent;
+    mdlSnackbarComponent.show().subscribe( () => {
+      result.next(mdlSnackbarComponent);
+      result.complete();
     });
 
+    return result.asObservable();
   }
 }