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

Author: vchimev

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

@@ -52,6 +52,7 @@ import { LivesyncApp } from "./examples/livesync-test/livesync-test-app";
 import { ModalTest } from "./examples/modal/modal-test";
 import { ModalNestedTest } from "./examples/modal/modal-nested-test";
 import { ModalRouterOutletTest } from "./examples/modal/modal-router-outlet-test";
+import { ModalPageRouterOutletTest } from "./examples/modal/modal-page-router-outlet-test";
 
 // new router
 import { RouterOutletAppComponent } from "./examples/router/router-outlet-test";
@@ -192,4 +193,5 @@ onAfterLivesync.subscribe(({ moduleRef, error }) => {
 // console.log("APP RESTART!!!!  !!!");
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalTest));
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalNestedTest));
-platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalRouterOutletTest));
+// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalRouterOutletTest));
+platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalPageRouterOutletTest));

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

@@ -0,0 +1,47 @@
+import { Component, ViewContainerRef } from "@angular/core";
+import * as dialogs from "ui/dialogs";
+import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { FirstComponent, SecondComponent, ThirdComponent, PageRouterOutletAppComponent } from "../router/page-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 ModalPageRouterOutletTest {
+
+    public result: string = "result";
+
+    constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) { }
+
+    static entries = [
+        PageRouterOutletAppComponent,
+    ];
+
+    static exports = [
+        FirstComponent,
+        SecondComponent,
+        ThirdComponent
+    ];
+
+    static routes = PageRouterOutletAppComponent.routes;
+
+    public showModal(fullscreen: boolean) {
+        const options: ModalDialogOptions = {
+            fullscreen: fullscreen,
+            viewContainerRef: this.vcRef
+        };
+
+        this.modal.showModal(PageRouterOutletAppComponent, options).then((res: string) => {
+            this.result = res || "empty result";
+        });
+    }
+
+}

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

@@ -5,7 +5,6 @@ import { Page } from "ui/page";
 import { Observable } from "rxjs/Observable";
 import "rxjs/add/operator/map";
 
-
 @Component({
     selector: "first",
     styleUrls: ["examples/router/styles.css"],
@@ -19,7 +18,7 @@ import "rxjs/add/operator/map";
         <Button text="Third(2)" [nsRouterLink]="['/third', '2' ]"></Button>
     </StackLayout>`
 })
-class FirstComponent implements OnInit, OnDestroy {
+export class FirstComponent implements OnInit, OnDestroy {
     constructor(page: Page) {
         console.log("FirstComponent.constructor() page: " + page);
     }
@@ -47,7 +46,7 @@ class FirstComponent implements OnInit, OnDestroy {
         <Button text="Third(2)" [nsRouterLink]="['/third', '2' ]"></Button>
     </StackLayout>`
 })
-class SecondComponent implements OnInit, OnDestroy {
+export class SecondComponent implements OnInit, OnDestroy {
     public id: Observable<string>;
     constructor(private location: Location, route: ActivatedRoute, page: Page) {
         console.log("SecondComponent.constructor() page: " + page);
@@ -81,7 +80,7 @@ class SecondComponent implements OnInit, OnDestroy {
         <Button text="Second(2)" [nsRouterLink]="['/second', '2' ]"></Button>
     </StackLayout>`
 })
-class ThirdComponent implements OnInit, OnDestroy {
+export class ThirdComponent implements OnInit, OnDestroy {
     public id: Observable<string>;
     constructor(private location: Location, route: ActivatedRoute, page: Page) {
         console.log("ThirdComponent.constructor() page: " + page);