feat(DefaultOverlayTarget): directive to the the default view contain…

…er, can be used instead of the manual way which has some boilerplate

src/components/angular2-modal/angular2-modal.module.ts

@@ -4,21 +4,29 @@ import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
 import { DOMOutsideEventPlugin, DOMOverlayRenderer } from './providers/index';
 import { OverlayRenderer } from './models/tokens';
 import { CSSBackdrop, CSSDialogContainer } from './components/index';
-import { Overlay, ModalOverlay, OverlayDialogBoundary, OverlayTarget } from './overlay/index';
+import {
+  Overlay,
+  ModalOverlay,
+  OverlayDialogBoundary,
+  OverlayTarget,
+  DefaultOverlayTarget
+} from './overlay/index';
 
 @NgModule({
   declarations: [
     ModalOverlay,
     CSSBackdrop,
     CSSDialogContainer,
     OverlayDialogBoundary,
-    OverlayTarget
+    OverlayTarget,
+    DefaultOverlayTarget
   ],
   exports: [
     CSSBackdrop,
     CSSDialogContainer,
     OverlayDialogBoundary,
-    OverlayTarget
+    OverlayTarget,
+    DefaultOverlayTarget
   ],
   entryComponents: [
     ModalOverlay,
@@ -38,8 +46,8 @@ export class ModalModule {
   static withComponents(entryComponents: Array<Type | any[]>): ModuleWithProviders {
     return {
       ngModule: ModalModule,
-      providers : [
-        { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: entryComponents, multi: true }
+      providers: [
+        {provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: entryComponents, multi: true}
       ]
     }
   }
@@ -54,9 +62,9 @@ export class ModalModule {
       ngModule: ModalModule,
       providers: [
         Overlay,
-        { provide: OverlayRenderer, useClass: DOMOverlayRenderer },
-        { provide: EVENT_MANAGER_PLUGINS, useClass: DOMOutsideEventPlugin, multi: true },
-        { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: entryComponents || [], multi: true }
+        {provide: OverlayRenderer, useClass: DOMOverlayRenderer},
+        {provide: EVENT_MANAGER_PLUGINS, useClass: DOMOutsideEventPlugin, multi: true},
+        {provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: entryComponents || [], multi: true}
       ]
     };
   }

src/components/angular2-modal/overlay/index.ts

@@ -1,3 +1,3 @@
-export { OverlayTarget, OverlayDialogBoundary } from './overlay.directives'
+export { OverlayTarget, OverlayDialogBoundary, DefaultOverlayTarget } from './overlay.directives'
 export { ModalOverlay } from './overlay.component';
 export { Overlay } from './overlay.service';

src/components/angular2-modal/overlay/overlay.directives.ts

@@ -1,6 +1,14 @@
-import { Directive, Input, ElementRef, ViewContainerRef, OnDestroy } from '@angular/core';
+import {
+  Directive,
+  Input,
+  ElementRef,
+  ViewContainerRef,
+  OnDestroy
+} from '@angular/core';
+
 import { DialogRef } from '../models/dialog-ref';
 import { vcRefStore } from '../models/vc-ref-store';
+import { Overlay } from "./overlay.service";
 
 /**
  * A directive use to signal the overlay that the host of this directive
@@ -40,3 +48,17 @@ export class OverlayTarget implements OnDestroy {
     }
   }
 }
+
+const noop = () => {};
+@Directive({
+  selector: '[defaultOverlayTarget]'
+})
+export class DefaultOverlayTarget implements OnDestroy {
+  constructor(private overlay: Overlay, vcRef: ViewContainerRef) {
+    overlay.defaultViewContainer = vcRef;
+  }
+
+  ngOnDestroy() {
+    this.overlay.defaultViewContainer = undefined;
+  }
+}

src/components/angular2-modal/overlay/overlay.service.ts

@@ -64,7 +64,9 @@ export class Overlay {
 
     if (!containers || !containers[0]) {
       if (!this.defaultViewContainer) {
-        throw new Error('defaultViewContainer not set.');
+        throw new Error('Default view container not set. Add the "defaultOverlayTarget" directive ' +
+          'to the application root component template (e.g: <span defaultOverlayTarget></span>. ' +
+          'You can also set it manually using the "Overlay" service "defaultViewContainer" property.');
       }
       containers = [this.defaultViewContainer];
     }

src/components/angular2-modal/plugins/vex/modal.ts

@@ -1,3 +1,4 @@
+import { Observable } from "rxjs";
 import 'rxjs/add/operator/first';
 
 import { Injectable, ResolvedReflectiveProvider as RRP } from '@angular/core';
@@ -15,6 +16,7 @@ import {
 
 import { DropInPresetBuilder } from './presets/dropin-preset';
 
+
 @Injectable()
 export class Modal extends Modal_ {
   constructor(base: Overlay) {
@@ -80,7 +82,7 @@ export class Modal extends Modal_ {
       overlay.addClass('vex-closing');
       const completer = new PromiseCompleter<void>();
 
-      let animationEnd$ = container.myAnimationEnd$();
+      let animationEnd$: Observable<any> = container.myAnimationEnd$();
       if (dialogRef.context.className !== 'bottom-right-corner') {
         animationEnd$ = animationEnd$.combineLatest(backdrop.myAnimationEnd$(), (s1, s2) => [s1,s2] );
       }

src/demo/app/app.html

@@ -1,3 +1,4 @@
+<span defaultOverlayTarget></span>
 <header class="header">
     <div role="navigation" class="navbar navbar-default navbar-fixed-top">
         <div class="container">
@@ -18,4 +19,5 @@
 </header>
 <main>
     <router-outlet></router-outlet>
-</main>
+</main>
+

src/demo/app/app.ts

@@ -1,5 +1,4 @@
-import { Component, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { Overlay } from '../../components/angular2-modal';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 /*
  * App Component
@@ -14,11 +13,5 @@ import { Overlay } from '../../components/angular2-modal';
   templateUrl: './app.html'
 })
 export class App {
-  constructor(baseModal: Overlay, vcRef: ViewContainerRef) {
-    /**
-     * A Default view container ref, usually the app root container ref.
-     * Has to be set manually until we can find a way to get it automatically.
-     */
-    baseModal.defaultViewContainer = vcRef;
-  }
+  constructor() { }
 }