test(ng-sample): add modal router outlet example

Author: vchimev

Diff for: ng-sample/.vscode/launch.json

@@ -11,7 +11,7 @@
             "platform": "ios",
             "appRoot": "${workspaceRoot}",
             "sourceMaps": true,
-            "stopOnEntry": true,
+            "stopOnEntry": false,
             "tnsArgs": [
                 "--syncAllFiles"
             ],

Diff for: ng-sample/app/app.ts

@@ -45,11 +45,14 @@ import { ImageTest } from "./examples/image/image-test";
 import { HttpTest } from "./examples/http/http-test";
 import { HttpClientTest } from "./examples/http-client/http-client-test";
 import { ActionBarTest } from "./examples/action-bar/action-bar-test";
-import { ModalTest } from "./examples/modal/modal-test";
-import { ModalNestedTest } from "./examples/modal/modal-nested-test";
 import { PlatfromDirectivesTest } from "./examples/platform-directives/platform-directives-test";
 import { LivesyncApp } from "./examples/livesync-test/livesync-test-app";
 
+// modal
+import { ModalTest } from "./examples/modal/modal-test";
+import { ModalNestedTest } from "./examples/modal/modal-nested-test";
+import { ModalRouterOutletTest } from "./examples/modal/modal-router-outlet-test";
+
 // new router
 import { RouterOutletAppComponent } from "./examples/router/router-outlet-test";
 import { PageRouterOutletAppComponent } from "./examples/router/page-router-outlet-test";
@@ -82,7 +85,7 @@ import { AnimationStatesMultiTest } from "./examples/animation/animation-states-
     ],
     providers: [],
 })
-class ExampleModule {}
+class ExampleModule { }
 
 function makeExampleModule(componentType) {
     let imports: any[] = [NativeScriptAnimationsModule, ExampleModule];
@@ -112,7 +115,7 @@ function makeExampleModule(componentType) {
         providers,
         exports,
     })
-    class ExampleModuleForComponent {}
+    class ExampleModuleForComponent { }
 
     return ExampleModuleForComponent;
 }
@@ -188,4 +191,5 @@ onAfterLivesync.subscribe(({ moduleRef, error }) => {
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LivesyncApp));
 // console.log("APP RESTART!!!!  !!!");
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalTest));
-platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalNestedTest));
+// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalNestedTest));
+platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalRouterOutletTest));

Diff for: ng-sample/app/examples/modal/modal-nested-test.ts

@@ -17,7 +17,6 @@ export class ModalNestedTest {
     ];
 
     static exports = [
-        ModalContent,
         ModalTest
     ];
 

Diff for: ng-sample/app/examples/modal/modal-router-outlet-test.ts

@@ -0,0 +1,46 @@
+import { Component, ViewContainerRef } from "@angular/core";
+import * as dialogs from "ui/dialogs";
+import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { FirstComponent, SecondComponent, RouterOutletAppComponent } from "../router/router-outlet-test";
+
+@Component({
+    selector: "modal-router-outlet-test",
+    template: `
+    <GridLayout rows="*, auto">
+        <StackLayout verticalAlignment="top" margin="12">
+            <Button text="show component" (tap)="showModal(false)"></Button>
+            <Button text="show component fullscreen" (tap)="showModal(true)"></Button>
+        </StackLayout>
+        <Label [text]="'RESULT: ' + result" row="1" margin="12"></Label>
+    </GridLayout>
+    `
+})
+export class ModalRouterOutletTest {
+
+    public result: string = "result";
+
+    constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) { }
+
+    static entries = [
+        RouterOutletAppComponent,
+    ];
+
+    static exports = [
+        FirstComponent,
+        SecondComponent
+    ];
+
+    static routes = RouterOutletAppComponent.routes;
+
+    public showModal(fullscreen: boolean) {
+        const options: ModalDialogOptions = {
+            fullscreen: fullscreen,
+            viewContainerRef: this.vcRef
+        };
+
+        this.modal.showModal(RouterOutletAppComponent, options).then((res: string) => {
+            this.result = res || "empty result";
+        });
+    }
+
+}

Diff for: ng-sample/app/examples/modal/modal-test.ts

@@ -31,9 +31,7 @@ export class ModalTest {
         ModalContent
     ];
 
-    static exports = [
-        ModalContent
-    ];
+    static exports = [];
 
     public showModal(fullscreen: boolean) {
         const options: ModalDialogOptions = {

Diff for: ng-sample/app/examples/router/router-outlet-test.ts

@@ -10,7 +10,7 @@ import "rxjs/add/operator/map";
         <Label text="First component" class="title"></Label>
     </StackLayout>`
 })
-class FirstComponent implements OnInit, OnDestroy {
+export class FirstComponent implements OnInit, OnDestroy {
     ngOnInit() {
         console.log("FirstComponent - ngOnInit()");
     }
@@ -28,7 +28,7 @@ class FirstComponent implements OnInit, OnDestroy {
         <Label [text]="'Second component: ' + (id | async)" class="title"></Label>
     </StackLayout>`
 })
-class SecondComponent implements OnInit, OnDestroy {
+export class SecondComponent implements OnInit, OnDestroy {
     id;
     constructor(route: ActivatedRoute) {
         this.id = route.params.map(r => r["id"]);
@@ -49,8 +49,14 @@ class SecondComponent implements OnInit, OnDestroy {
     template: `
         <StackLayout>
             <StackLayout class="nav">
-                <Button text="First" [class.rlaActive]="rla.isActive" nsRouterLinkActive="active" nsRouterLink="/first" #rla="routerLinkActive"></Button>
-                <Button text="Second(1)" nsRouterLinkActive="active" nsRouterLink="/second/1"></Button>
+                <Button text="First"
+                    [class.rlaActive]="rla.isActive"
+                    nsRouterLinkActive="active"
+                    nsRouterLink="/first"
+                    #rla="routerLinkActive"></Button>
+                <Button text="Second(1)"
+                    nsRouterLinkActive="active"
+                    nsRouterLink="/second/1"></Button>
                 <Button text="Second(2)"
                     nsRouterLinkActive="active"
                     [nsRouterLink]="['/second', '2' ]">