From 666c75cae81cf6cc884e9fc8fb17ac0996746dba Mon Sep 17 00:00:00 2001
From: ADjenkov <ADjenkov>
Date: Wed, 23 May 2018 15:40:56 +0300
Subject: [PATCH 1/2] chore(modal-navigation): update modal-navigation app

---
 e2e/modal-navigation-ng/app/app.module.ts     |  10 +-
 e2e/modal-navigation-ng/app/app.routing.ts    |  21 ++--
 .../app/home/home.component.html              |  14 +++
 .../app/home/home.component.ts                |  30 +++--
 .../app/modal/modal-nested-test.ts            |  23 ----
 .../modal-router/modal-router.component.html  |   1 +
 .../modal-router/modal-router.component.ts    |  24 ++++
 .../app/modal/modal-test.ts                   | 109 ------------------
 .../app/modal/modal.component.html            |  16 +++
 .../{modal-content.ts => modal.component.ts}  |  34 +++---
 10 files changed, 107 insertions(+), 175 deletions(-)
 create mode 100644 e2e/modal-navigation-ng/app/home/home.component.html
 delete mode 100644 e2e/modal-navigation-ng/app/modal/modal-nested-test.ts
 create mode 100644 e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.html
 create mode 100644 e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.ts
 delete mode 100644 e2e/modal-navigation-ng/app/modal/modal-test.ts
 create mode 100644 e2e/modal-navigation-ng/app/modal/modal.component.html
 rename e2e/modal-navigation-ng/app/modal/{modal-content.ts => modal.component.ts} (52%)

diff --git a/e2e/modal-navigation-ng/app/app.module.ts b/e2e/modal-navigation-ng/app/app.module.ts
index 87e0f0857..816fad560 100644
--- a/e2e/modal-navigation-ng/app/app.module.ts
+++ b/e2e/modal-navigation-ng/app/app.module.ts
@@ -6,8 +6,10 @@ import { AppComponent } from "./app.component";
 import { ItemService } from "./item/item.service";
 import { ItemsComponent } from "./item/items.component";
 import { ItemDetailComponent } from "./item/item-detail.component";
+
 import { HomeComponent } from "./home/home.component";
-import { ModalTest } from "./modal/modal-test";
+import { ModalComponent } from "./modal/modal.component";
+import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
 
 // Uncomment and add to NgModule imports if you need to use two-way binding
 // import { NativeScriptFormsModule } from "nativescript-angular/forms";
@@ -23,14 +25,14 @@ import { ModalTest } from "./modal/modal-test";
         NativeScriptModule,
         AppRoutingModule
     ],
-    entryComponents: [...ModalTest.entries],
+    entryComponents: [ModalComponent],
     declarations: [
         AppComponent,
         ItemsComponent,
         ItemDetailComponent,
         HomeComponent,
-        ModalTest,
-        ...ModalTest.entries
+        ModalComponent,
+        ModalRouterComponent
     ],
     providers: [
         ItemService
diff --git a/e2e/modal-navigation-ng/app/app.routing.ts b/e2e/modal-navigation-ng/app/app.routing.ts
index b02a5ceb0..93a46a17a 100644
--- a/e2e/modal-navigation-ng/app/app.routing.ts
+++ b/e2e/modal-navigation-ng/app/app.routing.ts
@@ -1,21 +1,20 @@
 import { NgModule } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
-import { Routes } from "@angular/router";
+import { Routes, ChildrenOutletContexts } from "@angular/router";
 
 import { HomeComponent } from "./home/home.component";
-import { ItemsComponent } from "./item/items.component";
-import { ItemDetailComponent } from "./item/item-detail.component";
-import { ModalTest } from "./modal/modal-test";
+import { ModalComponent } from "./modal/modal.component";
+import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
 
 const routes: Routes = [
     { path: "", redirectTo: "/home", pathMatch: "full" },
-
-    { path: "home", component: HomeComponent },
-
-    { path: "modal", component: ModalTest , children: [
-        { path: "items", component: ItemsComponent },
-        { path: "item/:id", component: ItemDetailComponent },
-    ] },
+    {
+        path: "home", component: HomeComponent, children: [{
+            path: "modal", component: ModalRouterComponent, children: [
+                { path: "", component: ModalComponent }
+            ]
+        }]
+    }
 ];
 
 @NgModule({
diff --git a/e2e/modal-navigation-ng/app/home/home.component.html b/e2e/modal-navigation-ng/app/home/home.component.html
new file mode 100644
index 000000000..2dfbb9919
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/home/home.component.html
@@ -0,0 +1,14 @@
+<ActionBar class="action-bar">
+    <Label class="action-bar-title" text="Home"></Label>
+</ActionBar>
+
+<StackLayout>
+    <Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
+    <Button text="Show Modal Page" (tap)="onModalPage"></Button>
+    <Button text="Show Modal Layout" (tap)="onModalLayout"></Button>
+    <Button text="Show Modal TabView" (tap)="onModalTabView"></Button>
+    <Button text="Navigate To Second Page" (tap)="onNavigate"></Button>
+    <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset"></Button>
+    <Button text="Reset Tab Root View" (tap)="onTabRootViewReset"></Button>
+    <Button text="Reset Layout Root View" (tap)="onLayoutRootViewReset"></Button>
+</StackLayout>
\ No newline at end of file
diff --git a/e2e/modal-navigation-ng/app/home/home.component.ts b/e2e/modal-navigation-ng/app/home/home.component.ts
index 8d52b9051..97228c8ae 100644
--- a/e2e/modal-navigation-ng/app/home/home.component.ts
+++ b/e2e/modal-navigation-ng/app/home/home.component.ts
@@ -1,21 +1,29 @@
 import { Component, ViewContainerRef } from "@angular/core";
+import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { EventData } from "tns-core-modules/data/observable";
+import { Frame } from "tns-core-modules/ui/frame";
+import { View } from "tns-core-modules/ui/core/view";
+import { ModalRouterComponent } from "../modal/modal-router/modal-router.component";
+import { PageRouterOutlet } from "nativescript-angular/router/page-router-outlet";
 import { RouterExtensions } from "nativescript-angular/router";
 
 @Component({
-    selector: "modal-test",
-    template: `
-    <GridLayout rows="*, auto">
-        <Button text="got to modal page" (tap)="gotToModal()"></Button>
-    </GridLayout>
-    `
+    moduleId: module.id,
+    selector: "home-page",
+    templateUrl: "./home.component.html"
 })
 export class HomeComponent {
+    constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef, private routerExtension: RouterExtensions) { }
 
-    public result: string = "result";
+    public onModalFrame(args: EventData) {
+        const options: ModalDialogOptions = {
+            // context: null,
+            fullscreen: true,
+            viewContainerRef: this.vcRef
+        };
 
-    constructor(private _routerExtensions: RouterExtensions, private vcRef: ViewContainerRef) { }
-
-    public gotToModal() {
-        this._routerExtensions.navigate(["/modal"]); //{clearHistory: true}
+        this.modal.showModal(ModalRouterComponent, options).then((res: string) => {
+             console.log("MODAL SHOWN");
+        });
     }
 }
diff --git a/e2e/modal-navigation-ng/app/modal/modal-nested-test.ts b/e2e/modal-navigation-ng/app/modal/modal-nested-test.ts
deleted file mode 100644
index d1ae043f2..000000000
--- a/e2e/modal-navigation-ng/app/modal/modal-nested-test.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component, ViewContainerRef } from "@angular/core";
-import * as dialogs from "ui/dialogs";
-import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
-import { ModalContent } from "./modal-content";
-import { ModalTest } from "./modal-test";
-
-@Component({
-    selector: "modal-nested-test",
-    template: `
-        <modal-test></modal-test>
-    `
-})
-export class ModalNestedTest {
-
-    static entries = [
-        ModalContent
-    ];
-
-    static exports = [
-        ModalTest
-    ];
-
-}
\ No newline at end of file
diff --git a/e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.html b/e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.html
new file mode 100644
index 000000000..1265aa9c8
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.html
@@ -0,0 +1 @@
+<page-router-outlet></page-router-outlet>
\ No newline at end of file
diff --git a/e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.ts b/e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.ts
new file mode 100644
index 000000000..ab2238d0e
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.ts
@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+import { Router, NavigationEnd, ActivatedRoute } from "@angular/router";
+import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
+import { RouterExtensions } from "nativescript-angular/router";
+
+@Component({
+    selector: "ns-router",
+    templateUrl: "app.component.html",
+})
+
+export class ModalRouterComponent {
+    constructor(router: Router, location: NSLocationStrategy, private routerExtension: RouterExtensions, private activeRoute: ActivatedRoute) {
+        router.events.subscribe(e => {
+            if (e instanceof NavigationEnd) {
+                console.log("[ROUTER]: " + e.toString());
+                console.log(location.toString());
+            }
+        });
+    }
+
+    ngOnInit() {
+        this.routerExtension.navigate(["modal"], { relativeTo: this.activeRoute });
+    }
+}
diff --git a/e2e/modal-navigation-ng/app/modal/modal-test.ts b/e2e/modal-navigation-ng/app/modal/modal-test.ts
deleted file mode 100644
index 9e7de20db..000000000
--- a/e2e/modal-navigation-ng/app/modal/modal-test.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Component, ViewContainerRef } from "@angular/core";
-import * as dialogs from "ui/dialogs";
-import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
-import { ModalContent } from "./modal-content";
-
-@Component({
-    selector: "modal-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>
-
-            <Button text="alert" (tap)="showAlert()"></Button>
-            <Button text="confirm" (tap)="showConfirm()"></Button>
-            <Button text="prompt" (tap)="showPrompt()"></Button>
-            <Button text="action" (tap)="showAction()"></Button>
-            <Button text="login" (tap)="showLogin()"></Button>
-        </StackLayout>
-        <Label [text]="'RESULT: ' + result" row="1" margin="12"></Label>
-    </GridLayout>
-    `
-})
-export class ModalTest {
-
-    public result: string = "result";
-
-    constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) { }
-
-    static entries = [
-        ModalContent
-    ];
-
-    public showModal(fullscreen: boolean) {
-        const options: ModalDialogOptions = {
-            context: { promptMsg: "This is the prompt message!" },
-            fullscreen: fullscreen,
-            viewContainerRef: this.vcRef
-        };
-
-        this.modal.showModal(ModalContent, options).then((res: string) => {
-            this.result = res || "empty result";
-            // console.log("MODAL:" + this.result);
-        });
-    }
-
-    public showAlert() {
-        dialogs.alert({
-            title: "Alert Title",
-            message: "The name will change.",
-            okButtonText: "OK"
-        }).then(() => {
-            this.result = "alert closed";
-        });
-    }
-
-    public showConfirm() {
-        dialogs.confirm({
-            title: "Name",
-            message: "Do you want to change the name?",
-            cancelButtonText: "No",
-            neutralButtonText: "Ignore",
-            okButtonText: "Yes"
-        }).then((confirmResult) => {
-            this.result = confirmResult + "";
-        });
-    }
-
-    public showPrompt() {
-        dialogs.prompt({
-            title: "Name",
-            message: "Enter name:",
-            cancelButtonText: "Cancel",
-            neutralButtonText: "Ignore",
-            okButtonText: "OK",
-            defaultText: "John Reese",
-            inputType: dialogs.inputType.text
-        }).then((promptResult) => {
-            this.result = promptResult.result ? promptResult.text : "no result";
-        });
-    }
-
-    public showAction() {
-        dialogs.action({
-            message: "Choose action:",
-            cancelButtonText: "Close",
-            actions: ["Foo", "Bar"]
-        }).then((actionResult) => {
-            this.result = actionResult;
-        });
-    }
-
-    public showLogin() {
-        dialogs.login({
-            title: "Name",
-            message: "Enter name:",
-            cancelButtonText: "Cancel",
-            neutralButtonText: "Ignore",
-            okButtonText: "OK",
-            userName: "John",
-            password: "Reese"
-        }).then((loginResult) => {
-            this.result = loginResult.result ?
-                ("user: " + loginResult.userName + " pass: " + loginResult.password) :
-                "no result";
-        });
-    }
-
-}
diff --git a/e2e/modal-navigation-ng/app/modal/modal.component.html b/e2e/modal-navigation-ng/app/modal/modal.component.html
new file mode 100644
index 000000000..73049dff0
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/modal/modal.component.html
@@ -0,0 +1,16 @@
+<ActionBar>
+    <Label text="Modal"></Label>
+</ActionBar>
+
+<GridLayout #rootLayout rows="*, auto">
+    <StackLayout>
+      <!-- <page-router-outlet></page-router-outlet> -->
+    </StackLayout>    
+    <StackLayout backgroundColor="lightGreen">
+        <Button text="Navigate To Second Page" (tap)="onNavigate" visibility="{{ navigationVisibility }}"></Button>
+        <Button text="Show Dialog Confirm" (tap)="showDialogConfirm()"></Button>
+        <Button text="Show Nested Modal Page With Frame" (tap)="showNestedModalFrame()"></Button>
+        <Button text="Show Nested Modal Page" (tap)="showNestedModalPage()"></Button>
+        <Button text="Close Modal" (tap)="close(rootLayout)"></Button>
+    </StackLayout>
+</GridLayout>
\ No newline at end of file
diff --git a/e2e/modal-navigation-ng/app/modal/modal-content.ts b/e2e/modal-navigation-ng/app/modal/modal.component.ts
similarity index 52%
rename from e2e/modal-navigation-ng/app/modal/modal-content.ts
rename to e2e/modal-navigation-ng/app/modal/modal.component.ts
index 249227ac4..027b80b38 100644
--- a/e2e/modal-navigation-ng/app/modal/modal-content.ts
+++ b/e2e/modal-navigation-ng/app/modal/modal.component.ts
@@ -3,23 +3,14 @@ import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
 import { RouterExtensions, PageRoute } from "nativescript-angular/router";
 import { ActivatedRoute } from "@angular/router";
 import { View } from "ui/core/view"
+import { confirm } from "ui/dialogs";
 
 @Component({
-    selector: "modal-content",
-    template: `
-    <GridLayout #rootLayout margin="24" horizontalAlignment="center" verticalAlignment="center" rows="*, auto">
-        <StackLayout>
-          <page-router-outlet></page-router-outlet>
-        </StackLayout>    
-        <StackLayout row="1" orientation="horizontal" marginTop="12">
-                <Button text="back" (tap)="back()"></Button>
-                <Button text="ok" (tap)="close('OK')"></Button>
-                <Button text="cancel" (tap)="close(rootLayout)"></Button>
-        </StackLayout>
-    </GridLayout>
-    `
+    moduleId: module.id,
+    selector: "modal-page",
+    templateUrl: "./modal.component.html"
 })
-export class ModalContent {
+export class ModalComponent {
 
     @Input() public prompt: string;
     public yes: boolean = true;
@@ -35,16 +26,25 @@ export class ModalContent {
 
     public close(layoutRoot: View) {
         layoutRoot.closeModal();
-        // this.params.closeCallback(res);
     }
 
     ngOnInit() {
-        this.nav.navigate(["items"], { relativeTo: this.activeRoute });
-        console.log("ModalContent.ngOnInit");
     }
 
     ngOnDestroy() {
         console.log("ModalContent.ngOnDestroy");
     }
 
+    showDialogConfirm() {
+        let options = {
+            title: "Dialog",
+            message: "Message",
+            okButtonText: "Yes",
+            cancelButtonText: "No"
+
+        }
+        confirm(options).then((result: boolean) => {
+            console.log(result);
+        })
+    }
 }

From b5030d80cd9623955549f406cf9508ede8511711 Mon Sep 17 00:00:00 2001
From: ADjenkov <ADjenkov>
Date: Thu, 31 May 2018 15:53:44 +0300
Subject: [PATCH 2/2] feat: complete componets and navigation

---
 e2e/modal-navigation-ng/app/app.module.ts     | 27 ++++----
 e2e/modal-navigation-ng/app/app.routing.ts    | 24 +++++--
 .../app/home/home.component.html              |  8 +--
 .../app/home/home.component.ts                | 32 +++++++++-
 .../app/item/item-detail.component.html       |  8 ---
 .../app/item/item-detail.component.ts         | 27 --------
 .../app/item/item.service.ts                  | 39 -----------
 e2e/modal-navigation-ng/app/item/item.ts      |  5 --
 .../app/item/items.component.html             | 33 ----------
 .../app/item/items.component.ts               | 21 ------
 .../modal-nested/modal-nested.component.html  |  8 +++
 .../modal-nested/modal-nested.component.ts    | 26 ++++++++
 .../modal-second/modal-second.component.html  |  9 +++
 .../modal-second/modal-second.component.ts    | 24 +++++++
 .../modal-router/modal-router.component.ts    | 21 +++---
 .../app/modal/modal.component.html            | 13 ++--
 .../app/modal/modal.component.ts              | 64 +++++++++++++++----
 .../app/second/second.component.html          |  9 +++
 .../app/second/second.component.ts            | 51 +++++++++++++++
 .../app/tab.compomemt.html                    | 12 ++++
 20 files changed, 266 insertions(+), 195 deletions(-)
 delete mode 100644 e2e/modal-navigation-ng/app/item/item-detail.component.html
 delete mode 100644 e2e/modal-navigation-ng/app/item/item-detail.component.ts
 delete mode 100644 e2e/modal-navigation-ng/app/item/item.service.ts
 delete mode 100644 e2e/modal-navigation-ng/app/item/item.ts
 delete mode 100644 e2e/modal-navigation-ng/app/item/items.component.html
 delete mode 100644 e2e/modal-navigation-ng/app/item/items.component.ts
 create mode 100644 e2e/modal-navigation-ng/app/modal-nested/modal-nested.component.html
 create mode 100644 e2e/modal-navigation-ng/app/modal-nested/modal-nested.component.ts
 create mode 100644 e2e/modal-navigation-ng/app/modal-second/modal-second.component.html
 create mode 100644 e2e/modal-navigation-ng/app/modal-second/modal-second.component.ts
 create mode 100644 e2e/modal-navigation-ng/app/second/second.component.html
 create mode 100644 e2e/modal-navigation-ng/app/second/second.component.ts
 create mode 100644 e2e/modal-navigation-ng/app/tab.compomemt.html

diff --git a/e2e/modal-navigation-ng/app/app.module.ts b/e2e/modal-navigation-ng/app/app.module.ts
index 816fad560..af8060319 100644
--- a/e2e/modal-navigation-ng/app/app.module.ts
+++ b/e2e/modal-navigation-ng/app/app.module.ts
@@ -3,19 +3,18 @@ import { NativeScriptModule } from "nativescript-angular/nativescript.module";
 import { AppRoutingModule } from "./app.routing";
 import { AppComponent } from "./app.component";
 
-import { ItemService } from "./item/item.service";
-import { ItemsComponent } from "./item/items.component";
-import { ItemDetailComponent } from "./item/item-detail.component";
-
 import { HomeComponent } from "./home/home.component";
+import { SecondComponent } from "./second/second.component";
+import { ModalSecondComponent } from "./modal-second/modal-second.component";
 import { ModalComponent } from "./modal/modal.component";
+import { NestedModalComponent } from "./modal-nested/modal-nested.component";
 import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
 
-// Uncomment and add to NgModule imports if you need to use two-way binding
-// import { NativeScriptFormsModule } from "nativescript-angular/forms";
+import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
+import { routerTraceCategory } from "nativescript-angular/trace";
 
-// Uncomment and add to NgModule imports  if you need to use the HTTP wrapper
-// import { NativeScriptHttpModule } from "nativescript-angular/http";
+// addCategories(routerTraceCategory);
+// traceEnable();
 
 @NgModule({
     bootstrap: [
@@ -25,17 +24,15 @@ import { ModalRouterComponent } from "./modal/modal-router/modal-router.componen
         NativeScriptModule,
         AppRoutingModule
     ],
-    entryComponents: [ModalComponent],
+    entryComponents: [ModalRouterComponent, NestedModalComponent, ModalComponent],
     declarations: [
         AppComponent,
-        ItemsComponent,
-        ItemDetailComponent,
         HomeComponent,
+        SecondComponent,
         ModalComponent,
-        ModalRouterComponent
-    ],
-    providers: [
-        ItemService
+        NestedModalComponent,
+        ModalRouterComponent,
+        ModalSecondComponent
     ],
     schemas: [
         NO_ERRORS_SCHEMA
diff --git a/e2e/modal-navigation-ng/app/app.routing.ts b/e2e/modal-navigation-ng/app/app.routing.ts
index 93a46a17a..9c5a1a973 100644
--- a/e2e/modal-navigation-ng/app/app.routing.ts
+++ b/e2e/modal-navigation-ng/app/app.routing.ts
@@ -3,17 +3,31 @@ import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { Routes, ChildrenOutletContexts } from "@angular/router";
 
 import { HomeComponent } from "./home/home.component";
+import { SecondComponent } from "./second/second.component";
+import { ModalSecondComponent } from "./modal-second/modal-second.component";
 import { ModalComponent } from "./modal/modal.component";
+import { NestedModalComponent } from "./modal-nested/modal-nested.component";
 import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
 
 const routes: Routes = [
     { path: "", redirectTo: "/home", pathMatch: "full" },
     {
-        path: "home", component: HomeComponent, children: [{
-            path: "modal", component: ModalRouterComponent, children: [
-                { path: "", component: ModalComponent }
-            ]
-        }]
+        path: "home", component: HomeComponent, children: [
+            {
+                path: "modal", component: ModalComponent, children: [
+                    { path: "nested-frame-modal", component: NestedModalComponent }]
+            },
+            { path: "modal-second", component: ModalSecondComponent }
+        ]
+    },
+    {
+        path: "second", component: SecondComponent, children: [
+            {
+                path: "modal", component: ModalComponent, children: [
+                    { path: "nested-frame-modal", component: NestedModalComponent }]
+            },
+            { path: "modal-second", component: ModalSecondComponent }
+        ]
     }
 ];
 
diff --git a/e2e/modal-navigation-ng/app/home/home.component.html b/e2e/modal-navigation-ng/app/home/home.component.html
index 2dfbb9919..46adbb359 100644
--- a/e2e/modal-navigation-ng/app/home/home.component.html
+++ b/e2e/modal-navigation-ng/app/home/home.component.html
@@ -3,12 +3,10 @@
 </ActionBar>
 
 <StackLayout>
+    <Button text="Show Modal Without Frame" (tap)="onModalNoFrame()"></Button>
     <Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
-    <Button text="Show Modal Page" (tap)="onModalPage"></Button>
-    <Button text="Show Modal Layout" (tap)="onModalLayout"></Button>
-    <Button text="Show Modal TabView" (tap)="onModalTabView"></Button>
-    <Button text="Navigate To Second Page" (tap)="onNavigate"></Button>
-    <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset"></Button>
+    <Button text="Navigate To Second Page" (tap)="onNavigateSecond()"></Button>
+    <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
     <Button text="Reset Tab Root View" (tap)="onTabRootViewReset"></Button>
     <Button text="Reset Layout Root View" (tap)="onLayoutRootViewReset"></Button>
 </StackLayout>
\ No newline at end of file
diff --git a/e2e/modal-navigation-ng/app/home/home.component.ts b/e2e/modal-navigation-ng/app/home/home.component.ts
index 97228c8ae..d494180a6 100644
--- a/e2e/modal-navigation-ng/app/home/home.component.ts
+++ b/e2e/modal-navigation-ng/app/home/home.component.ts
@@ -6,6 +6,7 @@ import { View } from "tns-core-modules/ui/core/view";
 import { ModalRouterComponent } from "../modal/modal-router/modal-router.component";
 import { PageRouterOutlet } from "nativescript-angular/router/page-router-outlet";
 import { RouterExtensions } from "nativescript-angular/router";
+import { ModalComponent } from "../modal/modal.component";
 
 @Component({
     moduleId: module.id,
@@ -15,15 +16,40 @@ import { RouterExtensions } from "nativescript-angular/router";
 export class HomeComponent {
     constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef, private routerExtension: RouterExtensions) { }
 
-    public onModalFrame(args: EventData) {
+    onModalNoFrame(args: EventData) {
         const options: ModalDialogOptions = {
-            // context: null,
+            context: {
+                navigationVisibility: false
+            },
+            fullscreen: true,
+            viewContainerRef: this.vcRef
+        };
+
+        this.modal.showModal(ModalComponent, options).then((res: string) => {
+            console.log("moda-no-frame closed");
+        });
+    }
+
+    onModalFrame(args: EventData) {
+        const options: ModalDialogOptions = {
+            context: {
+                navigationVisibility: true,
+                modalRoute: "modal"
+            },
             fullscreen: true,
             viewContainerRef: this.vcRef
         };
 
         this.modal.showModal(ModalRouterComponent, options).then((res: string) => {
-             console.log("MODAL SHOWN");
+            console.log("moda-frame closed");
         });
     }
+
+    onNavigateSecond(args: EventData) {
+        this.routerExtension.navigate(["second"]);
+    }
+
+    onFrameRootViewReset(args: EventData) {
+        
+    }
 }
diff --git a/e2e/modal-navigation-ng/app/item/item-detail.component.html b/e2e/modal-navigation-ng/app/item/item-detail.component.html
deleted file mode 100644
index 3bbd174c0..000000000
--- a/e2e/modal-navigation-ng/app/item/item-detail.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<ActionBar title="Details" class="action-bar"></ActionBar>
-<FlexboxLayout flexDirection="column" class="page">
-    <FlexboxLayout class="m-15">
-        <Label class="h2" [text]="item.id + '. '"></Label>
-        <Label class="h2" [text]="item.name"></Label>
-    </FlexboxLayout>
-    <Label class="h4" [text]="item.role"></Label>
-</FlexboxLayout>
diff --git a/e2e/modal-navigation-ng/app/item/item-detail.component.ts b/e2e/modal-navigation-ng/app/item/item-detail.component.ts
deleted file mode 100644
index 0fedf56b0..000000000
--- a/e2e/modal-navigation-ng/app/item/item-detail.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component, OnInit, OnDestroy } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
-
-import { Item } from "./item";
-import { ItemService } from "./item.service";
-
-@Component({
-    selector: "ns-details",
-    moduleId: module.id,
-    templateUrl: "./item-detail.component.html",
-})
-export class ItemDetailComponent implements OnInit, OnDestroy {
-    item: Item;
-
-    constructor(
-        private itemService: ItemService,
-        private route: ActivatedRoute
-    ) { }
-
-    ngOnInit(): void {
-        const id = +this.route.snapshot.params["id"];
-        this.item = this.itemService.getItem(id);
-    }
-
-    ngOnDestroy(): void {
-    }
-}
diff --git a/e2e/modal-navigation-ng/app/item/item.service.ts b/e2e/modal-navigation-ng/app/item/item.service.ts
deleted file mode 100644
index 0feb6c5ff..000000000
--- a/e2e/modal-navigation-ng/app/item/item.service.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Injectable } from "@angular/core";
-
-import { Item } from "./item";
-
-@Injectable()
-export class ItemService {
-    private items = new Array<Item>(
-        { id: 1, name: "Ter Stegen", role: "Goalkeeper" },
-        { id: 3, name: "Piqué", role: "Defender" },
-        { id: 4, name: "I. Rakitic", role: "Midfielder" },
-        { id: 5, name: "Sergio", role: "Midfielder" },
-        { id: 6, name: "Denis Suárez", role: "Midfielder" },
-        { id: 7, name: "Arda", role: "Midfielder" },
-        { id: 8, name: "A. Iniesta", role: "Midfielder" },
-        { id: 9, name: "Suárez", role: "Forward" },
-        { id: 10, name: "Messi", role: "Forward" },
-        { id: 11, name: "Neymar", role: "Forward" },
-        { id: 12, name: "Rafinha", role: "Midfielder" },
-        { id: 13, name: "Cillessen", role: "Goalkeeper" },
-        { id: 14, name: "Mascherano", role: "Defender" },
-        { id: 17, name: "Paco Alcácer", role: "Forward" },
-        { id: 18, name: "Jordi Alba", role: "Defender" },
-        { id: 19, name: "Digne", role: "Defender" },
-        { id: 20, name: "Sergi Roberto", role: "Midfielder" },
-        { id: 21, name: "André Gomes", role: "Midfielder" },
-        { id: 22, name: "Aleix Vidal", role: "Midfielder" },
-        { id: 23, name: "Umtiti", role: "Defender" },
-        { id: 24, name: "Mathieu", role: "Defender" },
-        { id: 25, name: "Masip", role: "Goalkeeper" },
-    );
-
-    getItems(): Item[] {
-        return this.items;
-    }
-
-    getItem(id: number): Item {
-        return this.items.filter(item => item.id === id)[0];
-    }
-}
diff --git a/e2e/modal-navigation-ng/app/item/item.ts b/e2e/modal-navigation-ng/app/item/item.ts
deleted file mode 100644
index 950fba446..000000000
--- a/e2e/modal-navigation-ng/app/item/item.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface Item {
-    id: number;
-    name: string;
-    role: string;
-}
diff --git a/e2e/modal-navigation-ng/app/item/items.component.html b/e2e/modal-navigation-ng/app/item/items.component.html
deleted file mode 100644
index 6ae2a4ae8..000000000
--- a/e2e/modal-navigation-ng/app/item/items.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--
-The template defines the view of the component - what is actually rendered. 
-In NativeScript applications the template is defined with XML using NativeScript UI elements. 
-It is different from HTML. So instead of <input>, <span>, <div> etc. - we have <TextField>, <Label> and layouts.
-The important thing is that although the elements are different - all of the Angular’s template syntax works exactly the same. 
-So you can still use template expressions, bindings, templates as well as all the built-in directives.
--->
-
-<!--
-The ActionBar is the NativeScript common abstraction over the Android ActionBar and iOS NavigationBar.
-http://docs.nativescript.org/ui/action-bar
--->
-<ActionBar title="My App" class="action-bar">
-</ActionBar>
-
-<!--
-The StackLayout stacks UI components on the screen — either vertically or horizontally.
-In this case, the StackLayout does vertical stacking; you can change the stacking to
-horizontal by applying a orientation="horizontal" attribute to the <StackLayout> element.
-You can learn more about NativeScript layouts at https://docs.nativescript.org/ui/layout-containers.
-
-These components make use of several CSS class names that are part of the NativeScript
-core theme, such as p-20, btn, h2, and list-group. You can view a full list of the
-class names available for styling your app at https://docs.nativescript.org/ui/theme.
--->
-<StackLayout class="page">
-    <ListView [items]="items" class="list-group">
-        <ng-template let-item="item">
-            <Label [nsRouterLink]="['../item', item.id]" [text]="item.name"
-                class="list-group-item"></Label>
-        </ng-template>
-    </ListView>
-</StackLayout>
diff --git a/e2e/modal-navigation-ng/app/item/items.component.ts b/e2e/modal-navigation-ng/app/item/items.component.ts
deleted file mode 100644
index 0ea98c8c5..000000000
--- a/e2e/modal-navigation-ng/app/item/items.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-
-import { Item } from "./item";
-import { ItemService } from "./item.service";
-
-@Component({
-    selector: "ns-items",
-    moduleId: module.id,
-    templateUrl: "./items.component.html",
-})
-export class ItemsComponent implements OnInit {
-    items: Item[];
-
-    // This pattern makes use of Angular’s dependency injection implementation to inject an instance of the ItemService service into this class. 
-    // Angular knows about this service because it is included in your app’s main NgModule, defined in app.module.ts.
-    constructor(private itemService: ItemService) { }
-
-    ngOnInit(): void {
-        this.items = this.itemService.getItems();
-    }
-}
\ No newline at end of file
diff --git a/e2e/modal-navigation-ng/app/modal-nested/modal-nested.component.html b/e2e/modal-navigation-ng/app/modal-nested/modal-nested.component.html
new file mode 100644
index 000000000..13c391cb7
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/modal-nested/modal-nested.component.html
@@ -0,0 +1,8 @@
+
+<ActionBar *ngIf="navigationVisibility === 'visible'">
+    <Label class="action-bar-title" text="Modal Nested"></Label>
+</ActionBar>
+
+<GridLayout #rootLayout rows="auto" (showingModally)="onShowingModally($event)" backgroundColor="lightBlue">
+    <Button text="Close Modal Nested" (tap)="close(rootLayout)"></Button>
+</GridLayout>
\ No newline at end of file
diff --git a/e2e/modal-navigation-ng/app/modal-nested/modal-nested.component.ts b/e2e/modal-navigation-ng/app/modal-nested/modal-nested.component.ts
new file mode 100644
index 000000000..7069b058d
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/modal-nested/modal-nested.component.ts
@@ -0,0 +1,26 @@
+import { Component } from "@angular/core";
+import { View, ShownModallyData } from "ui/core/view"
+import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
+
+@Component({
+    moduleId: module.id,
+    selector: "modal-nested-page",
+    templateUrl: "./modal-nested.component.html"
+})
+export class NestedModalComponent {
+    public navigationVisibility: string = "collapse";
+
+    constructor(private params: ModalDialogParams) {
+
+        console.log("ModalNestedContent.constructor: " + JSON.stringify(params));
+        this.navigationVisibility = params.context.navigationVisibility ? "visible" : "collapse";
+    }
+
+    close(layoutRoot: View) {
+        layoutRoot.closeModal();
+    }
+
+    onShowingModally(args: ShownModallyData) {
+        console.log("modal-page showingModally");
+    }
+}
diff --git a/e2e/modal-navigation-ng/app/modal-second/modal-second.component.html b/e2e/modal-navigation-ng/app/modal-second/modal-second.component.html
new file mode 100644
index 000000000..95d57917a
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/modal-second/modal-second.component.html
@@ -0,0 +1,9 @@
+
+<ActionBar class="action-bar">
+    <Label class="action-bar-title" text="Modal Second"></Label>
+</ActionBar>
+
+<GridLayout #rootLayout rows="auto, auto" (loaded)="onLoaded($event)">
+    <Button text="Go Back" (tap)="goBack()"></Button>
+    <Button row="1" text="Close Modal Nested" (tap)="close(rootLayout)"></Button>
+</GridLayout>
\ No newline at end of file
diff --git a/e2e/modal-navigation-ng/app/modal-second/modal-second.component.ts b/e2e/modal-navigation-ng/app/modal-second/modal-second.component.ts
new file mode 100644
index 000000000..c89093a80
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/modal-second/modal-second.component.ts
@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+import { View, EventData } from "ui/core/view"
+import { RouterExtensions } from "nativescript-angular/router";
+
+@Component({
+    moduleId: module.id,
+    selector: "modal-second-page",
+    templateUrl: "./modal-second.component.html"
+})
+export class ModalSecondComponent {
+    constructor(private routerExtension: RouterExtensions) { }
+
+    onLoaded(args: EventData) {
+        console.log("modal-second loaded");
+    }
+
+    goBack(args: EventData) {
+        this.routerExtension.back();
+    }
+
+    close(layoutRoot: View) {
+        layoutRoot.closeModal();
+    }
+}
diff --git a/e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.ts b/e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.ts
index ab2238d0e..e19520569 100644
--- a/e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.ts
+++ b/e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.ts
@@ -1,24 +1,21 @@
-import { Component } from "@angular/core";
-import { Router, NavigationEnd, ActivatedRoute } from "@angular/router";
-import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 import { RouterExtensions } from "nativescript-angular/router";
+import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
 
 @Component({
     selector: "ns-router",
     templateUrl: "app.component.html",
 })
 
-export class ModalRouterComponent {
-    constructor(router: Router, location: NSLocationStrategy, private routerExtension: RouterExtensions, private activeRoute: ActivatedRoute) {
-        router.events.subscribe(e => {
-            if (e instanceof NavigationEnd) {
-                console.log("[ROUTER]: " + e.toString());
-                console.log(location.toString());
-            }
-        });
+export class ModalRouterComponent implements OnInit {
+    private modalRoute: string;
+
+    constructor(private params: ModalDialogParams, private routerExtension: RouterExtensions, private activeRoute: ActivatedRoute) {
+        this.modalRoute = params.context.modalRoute;
     }
 
     ngOnInit() {
-        this.routerExtension.navigate(["modal"], { relativeTo: this.activeRoute });
+        this.routerExtension.navigate([this.modalRoute], { relativeTo: this.activeRoute });
     }
 }
diff --git a/e2e/modal-navigation-ng/app/modal/modal.component.html b/e2e/modal-navigation-ng/app/modal/modal.component.html
index 73049dff0..fafd5c47a 100644
--- a/e2e/modal-navigation-ng/app/modal/modal.component.html
+++ b/e2e/modal-navigation-ng/app/modal/modal.component.html
@@ -1,16 +1,13 @@
-<ActionBar>
+<ActionBar *ngIf="navigationVisibility === 'visible'">
     <Label text="Modal"></Label>
 </ActionBar>
 
-<GridLayout #rootLayout rows="*, auto">
-    <StackLayout>
-      <!-- <page-router-outlet></page-router-outlet> -->
-    </StackLayout>    
+<GridLayout #rootLayout rows="*, auto" (showingModally)="onShowingModally($event)"> 
     <StackLayout backgroundColor="lightGreen">
-        <Button text="Navigate To Second Page" (tap)="onNavigate" visibility="{{ navigationVisibility }}"></Button>
+        <Button text="Navigate To Second Page" (tap)="onNavigateSecondPage()" [visibility]="navigationVisibility"></Button>
+        <Button text="Show Nested Modal Page With Frame" (tap)="showNestedModalFrame()" [visibility]="navigationVisibility"></Button>
+        <Button text="Show Nested Modal Page" (tap)="showNestedModal()" [visibility]="navigationVisibility"></Button>
         <Button text="Show Dialog Confirm" (tap)="showDialogConfirm()"></Button>
-        <Button text="Show Nested Modal Page With Frame" (tap)="showNestedModalFrame()"></Button>
-        <Button text="Show Nested Modal Page" (tap)="showNestedModalPage()"></Button>
         <Button text="Close Modal" (tap)="close(rootLayout)"></Button>
     </StackLayout>
 </GridLayout>
\ No newline at end of file
diff --git a/e2e/modal-navigation-ng/app/modal/modal.component.ts b/e2e/modal-navigation-ng/app/modal/modal.component.ts
index 027b80b38..55ff26525 100644
--- a/e2e/modal-navigation-ng/app/modal/modal.component.ts
+++ b/e2e/modal-navigation-ng/app/modal/modal.component.ts
@@ -1,9 +1,11 @@
-import { Component, Input } from "@angular/core";
-import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
+import { Component, ViewContainerRef } from "@angular/core";
+import { ModalDialogParams, ModalDialogOptions, ModalDialogService } from "nativescript-angular/directives/dialogs";
 import { RouterExtensions, PageRoute } from "nativescript-angular/router";
 import { ActivatedRoute } from "@angular/router";
-import { View } from "ui/core/view"
+import { View, ShownModallyData, EventData } from "ui/core/view"
 import { confirm } from "ui/dialogs";
+import { ModalRouterComponent } from "../modal/modal-router/modal-router.component";
+import { NestedModalComponent } from "../modal-nested/modal-nested.component";
 
 @Component({
     moduleId: module.id,
@@ -11,20 +13,19 @@ import { confirm } from "ui/dialogs";
     templateUrl: "./modal.component.html"
 })
 export class ModalComponent {
+    public navigationVisibility: string = "collapse";
 
-    @Input() public prompt: string;
-    public yes: boolean = true;
+    constructor(private params: ModalDialogParams,
+        private vcRef: ViewContainerRef,
+        private routerExtension: RouterExtensions,
+        private activeRoute: ActivatedRoute,
+        private modal: ModalDialogService) {
 
-    constructor(private params: ModalDialogParams, private nav: RouterExtensions, private activeRoute: ActivatedRoute) {
-        console.log("ModalContent.constructor: " + JSON.stringify(params));
-        this.prompt = params.context.promptMsg;
+        console.log("\nModalContent.constructor: " + JSON.stringify(params));
+        this.navigationVisibility = params.context.navigationVisibility ? "visible" : "collapse";
     }
 
-    public back() {
-        this.nav.back();
-    }
-
-    public close(layoutRoot: View) {
+    close(layoutRoot: View) {
         layoutRoot.closeModal();
     }
 
@@ -35,16 +36,51 @@ export class ModalComponent {
         console.log("ModalContent.ngOnDestroy");
     }
 
+    onShowingModally(args: ShownModallyData) {
+        console.log("modal-page showingModally");
+    }
+
     showDialogConfirm() {
         let options = {
             title: "Dialog",
             message: "Message",
             okButtonText: "Yes",
             cancelButtonText: "No"
-
         }
+
         confirm(options).then((result: boolean) => {
             console.log(result);
         })
     }
+
+    showNestedModalFrame() {
+        const options: ModalDialogOptions = {
+            context: {
+                navigationVisibility: true,
+                modalRoute: "nested-frame-modal"
+            },
+            fullscreen: true,
+            viewContainerRef: this.vcRef
+        };
+
+        this.modal.showModal(ModalRouterComponent, options).then((res: string) => {
+            console.log("nested-modal-frame closed");
+        });
+    }
+
+    showNestedModal() {
+        const options: ModalDialogOptions = {
+            context: { navigationVisibility: false },
+            fullscreen: true,
+            viewContainerRef: this.vcRef
+        };
+
+        this.modal.showModal(NestedModalComponent, options).then((res: string) => {
+            console.log("nested-modal closed");
+        });
+    }
+
+    onNavigateSecondPage() {
+        this.routerExtension.navigate(["../modal-second"], { relativeTo: this.activeRoute });
+    }
 }
diff --git a/e2e/modal-navigation-ng/app/second/second.component.html b/e2e/modal-navigation-ng/app/second/second.component.html
new file mode 100644
index 000000000..069453908
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/second/second.component.html
@@ -0,0 +1,9 @@
+<ActionBar class="action-bar">
+    <Label class="action-bar-title" text="Second"></Label>
+</ActionBar>
+
+<StackLayout>
+    <Button text="Show Modal Without Frame" (tap)="onModalNoFrame()"></Button>
+    <Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
+    <Button text="Go Back" (tap)="goBack()"></Button>
+</StackLayout>
\ No newline at end of file
diff --git a/e2e/modal-navigation-ng/app/second/second.component.ts b/e2e/modal-navigation-ng/app/second/second.component.ts
new file mode 100644
index 000000000..bbbe01c8d
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/second/second.component.ts
@@ -0,0 +1,51 @@
+import { Component, ViewContainerRef } from "@angular/core";
+import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { EventData } from "tns-core-modules/data/observable";
+import { Frame } from "tns-core-modules/ui/frame";
+import { View } from "tns-core-modules/ui/core/view";
+import { ModalRouterComponent } from "../modal/modal-router/modal-router.component";
+import { PageRouterOutlet } from "nativescript-angular/router/page-router-outlet";
+import { RouterExtensions } from "nativescript-angular/router";
+import { ModalComponent } from "../modal/modal.component";
+
+@Component({
+    moduleId: module.id,
+    selector: "second-page",
+    templateUrl: "./second.component.html"
+})
+export class SecondComponent {
+    constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef, private routerExtension: RouterExtensions) { }
+
+    onModalNoFrame(args: EventData) {
+        const options: ModalDialogOptions = {
+            context: {
+                navigationVisibility: false
+            },
+            fullscreen: true,
+            viewContainerRef: this.vcRef
+        };
+
+        this.modal.showModal(ModalComponent, options).then((res: string) => {
+            console.log("moda-no-frame closed");
+        });
+    }
+
+    onModalFrame(args: EventData) {
+        const options: ModalDialogOptions = {
+            context: {
+                navigationVisibility: true,
+                modalRoute: "modal"
+            },
+            fullscreen: true,
+            viewContainerRef: this.vcRef
+        };
+
+        this.modal.showModal(ModalRouterComponent, options).then((res: string) => {
+            console.log("moda-frame closed");
+        });
+    }
+
+    goBack(args: EventData) {
+        this.routerExtension.back();
+    }
+}
diff --git a/e2e/modal-navigation-ng/app/tab.compomemt.html b/e2e/modal-navigation-ng/app/tab.compomemt.html
new file mode 100644
index 000000000..ce308b709
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/tab.compomemt.html
@@ -0,0 +1,12 @@
+<TabView #rootLayout androidTabsPosition="bottom" 
+    backgroundColor="white">
+    <page-router-outlet
+        *tabItem="{title: 'Modal First'}"
+        name="modalTab1">
+    </page-router-outlet>
+
+    <page-router-outlet
+        *tabItem="{title: 'Modal Second'}"
+        name="modalTab2">
+    </page-router-outlet>
+</TabView>
\ No newline at end of file