deprecate modal-dialog-host

Author: vakrilov

nativescript-angular/directives/dialogs.ts

@@ -22,20 +22,13 @@ export class ModalDialogParams {
 
 @Injectable()
 export class ModalDialogService {
-    private containerRef: ViewContainerRef;
-
-    public registerViewContainerRef(ref: ViewContainerRef) {
-        this.containerRef = ref;
-    }
-
     public showModal(type: Type<any>, options: ModalDialogOptions): Promise<any> {
-        let viewContainerRef = options.viewContainerRef || this.containerRef;
-
-        if (!viewContainerRef) {
+        if (!options.viewContainerRef) {
             throw new Error(
                 "No viewContainerRef: Make sure you pass viewContainerRef in ModalDialogOptions.");
         }
 
+        const viewContainerRef = options.viewContainerRef;
         const parentPage: Page = viewContainerRef.injector.get(Page);
         const resolver: ComponentFactoryResolver = viewContainerRef.injector.get(
             ComponentFactoryResolver);
@@ -101,10 +94,8 @@ export class ModalDialogService {
     selector: "[modal-dialog-host]"
 })
 export class ModalDialogHost {
-    constructor(containerRef: ViewContainerRef, modalService: ModalDialogService) {
-        console.log("ModalDialogHost is deprecated. Call ModalDialogService.showModal() " +
+    constructor() {
+        throw new Error("ModalDialogHost is deprecated. Call ModalDialogService.showModal() " +
             "by passing ViewContainerRef in the options instead.");
-
-        modalService.registerViewContainerRef(containerRef);
     }
 }

nativescript-angular/view-util.ts

@@ -166,6 +166,7 @@ export class ViewUtil {
         const viewClass = getViewClass(TEMPLATE);
         const anchor = this.createAndAttach(TEMPLATE, viewClass, parentElement);
         anchor.templateParent = parentElement;
+        anchor.visibility = "collapse";
         traceLog("Created templateAnchor: " + anchor);
         return anchor;
     }

ng-sample/app/app.ts

@@ -112,15 +112,15 @@ const customPageFactoryProvider = {
     }
 };
 
-platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RendererTest));
+// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RendererTest));
 // platformNativeScriptDynamic(undefined, [customPageFactoryProvider]).bootstrapModule(makeExampleModule(RendererTest));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(TabViewTest));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(Benchmark));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ListTest));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ListTemplateSelectorTest));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ListTestAsync));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ImageTest));
-// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalTest));
+platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalTest));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(HttpTest));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PlatfromDirectivesTest));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ActionBarTest));

tests/app/tests/modal-dialog.ts

@@ -1,12 +1,12 @@
 //make sure you import mocha-config before @angular/core
-import {assert} from "./test-config";
-import {TestApp} from "./test-app";
-import {Component, ViewContainerRef} from "@angular/core";
-import {Page} from "ui/page";
-import {topmost} from "ui/frame";
-import {ModalDialogParams, ModalDialogService} from "nativescript-angular/directives/dialogs";
-
-import {device, platformNames} from "platform";
+import { assert } from "./test-config";
+import { TestApp } from "./test-app";
+import { Component, ViewContainerRef } from "@angular/core";
+import { Page } from "ui/page";
+import { topmost } from "ui/frame";
+import { ModalDialogParams, ModalDialogService } from "nativescript-angular/directives/dialogs";
+
+import { device, platformNames } from "platform";
 const CLOSE_WAIT = (device.os === platformNames.ios) ? 1000 : 0;
 
 @Component({
@@ -37,7 +37,7 @@ export class FailComponent {
     selector: "sucess-comp",
     providers: [ModalDialogService],
     template: `
-    <GridLayout modal-dialog-host margin="20">
+    <GridLayout margin="20">
         <Label text="Modal dialogs"></Label>
     </GridLayout>`
 })
@@ -73,33 +73,24 @@ describe('modal-dialog', () => {
     });
 
 
-    it("showModal throws when there is no modal-dialog-host and no viewContainer provided", (done) => {
+    it("showModal throws when there is no viewContainer provided", (done) => {
         testApp.loadComponent(FailComponent)
             .then((ref) => {
                 const service = <ModalDialogService>ref.instance.service;
                 assert.throws(() => service.showModal(ModalComponent, {}), "No viewContainerRef: Make sure you pass viewContainerRef in ModalDialogOptions.");
             }).then(() => done(), err => done(err));
     });
 
-    it("showModal succeeds when there is modal-dialog-host", (done) => {
-        testApp.loadComponent(SuccessComponent)
-            .then((ref) => {
-                const service = <ModalDialogService>ref.instance.service;
-                return service.showModal(ModalComponent, {});
-            })
-            .then((res) => setTimeout(done, CLOSE_WAIT), err => done(err)); // wait for the dialog to close in IOS
-    });
-
     it("showModal succeeds when there is viewContainer provided", (done) => {
         testApp.loadComponent(SuccessComponent)
             .then((ref) => {
                 const service = <ModalDialogService>ref.instance.service;
-                return service.showModal(ModalComponent, {});
+                const comp = <SuccessComponent>ref.instance;
+                return service.showModal(ModalComponent, { viewContainerRef: comp.vcRef });
             })
             .then((res) => setTimeout(done, CLOSE_WAIT), err => done(err)); // wait for the dialog to close in IOS
     });
 
-
     it("showModal passes modal params and gets result when resolved", (done) => {
         const context = { property: "my context" };
         testApp.loadComponent(SuccessComponent)