diff --git a/e2e/modal-navigation-ng/app/app.module.ts b/e2e/modal-navigation-ng/app/app.module.ts
index 87e0f0857..af8060319 100644
--- a/e2e/modal-navigation-ng/app/app.module.ts
+++ b/e2e/modal-navigation-ng/app/app.module.ts
@@ -3,17 +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 { ModalTest } from "./modal/modal-test";
+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: [
@@ -23,17 +24,15 @@ import { ModalTest } from "./modal/modal-test";
NativeScriptModule,
AppRoutingModule
],
- entryComponents: [...ModalTest.entries],
+ entryComponents: [ModalRouterComponent, NestedModalComponent, ModalComponent],
declarations: [
AppComponent,
- ItemsComponent,
- ItemDetailComponent,
HomeComponent,
- ModalTest,
- ...ModalTest.entries
- ],
- providers: [
- ItemService
+ SecondComponent,
+ ModalComponent,
+ 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 b02a5ceb0..9c5a1a973 100644
--- a/e2e/modal-navigation-ng/app/app.routing.ts
+++ b/e2e/modal-navigation-ng/app/app.routing.ts
@@ -1,21 +1,34 @@
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 { 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 },
-
- { path: "modal", component: ModalTest , children: [
- { path: "items", component: ItemsComponent },
- { path: "item/:id", component: ItemDetailComponent },
- ] },
+ {
+ 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 }
+ ]
+ }
];
@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..ac5f99450
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/home/home.component.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ 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..d494180a6 100644
--- a/e2e/modal-navigation-ng/app/home/home.component.ts
+++ b/e2e/modal-navigation-ng/app/home/home.component.ts
@@ -1,21 +1,55 @@
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({
- selector: "modal-test",
- template: `
-
-
-
- `
+ 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";
+ onModalNoFrame(args: EventData) {
+ const options: ModalDialogOptions = {
+ context: {
+ navigationVisibility: false
+ },
+ fullscreen: true,
+ viewContainerRef: this.vcRef
+ };
- constructor(private _routerExtensions: RouterExtensions, private vcRef: ViewContainerRef) { }
+ 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");
+ });
+ }
+
+ onNavigateSecond(args: EventData) {
+ this.routerExtension.navigate(["second"]);
+ }
- public gotToModal() {
- this._routerExtensions.navigate(["/modal"]); //{clearHistory: true}
+ 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 @@
-
-
-
-
-
-
-
-
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- (
- { 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 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
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 @@
+
+
+
+
+
+
+
+
\ 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 @@
+
+
+
+
+
+
+
+
+
\ 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-content.ts b/e2e/modal-navigation-ng/app/modal/modal-content.ts
deleted file mode 100644
index 249227ac4..000000000
--- a/e2e/modal-navigation-ng/app/modal/modal-content.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Component, Input } from "@angular/core";
-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"
-
-@Component({
- selector: "modal-content",
- template: `
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class ModalContent {
-
- @Input() public prompt: string;
- public yes: boolean = true;
-
- constructor(private params: ModalDialogParams, private nav: RouterExtensions, private activeRoute: ActivatedRoute) {
- console.log("ModalContent.constructor: " + JSON.stringify(params));
- this.prompt = params.context.promptMsg;
- }
-
- public back() {
- this.nav.back();
- }
-
- 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");
- }
-
-}
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: `
-
- `
-})
-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 @@
+
\ 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..268235e5b
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/modal/modal-router/modal-router.component.ts
@@ -0,0 +1,22 @@
+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({
+ moduleId: module.id,
+ selector: "ns-modal-router",
+ templateUrl: "./modal-router.component.html",
+})
+
+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([this.modalRoute], { 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: `
-
-
-
-
-
-
-
-
-
-
-
-
-
- `
-})
-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..fafd5c47a
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/modal/modal.component.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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
new file mode 100644
index 000000000..55ff26525
--- /dev/null
+++ b/e2e/modal-navigation-ng/app/modal/modal.component.ts
@@ -0,0 +1,86 @@
+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, 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,
+ selector: "modal-page",
+ templateUrl: "./modal.component.html"
+})
+export class ModalComponent {
+ public navigationVisibility: string = "collapse";
+
+ constructor(private params: ModalDialogParams,
+ private vcRef: ViewContainerRef,
+ private routerExtension: RouterExtensions,
+ private activeRoute: ActivatedRoute,
+ private modal: ModalDialogService) {
+
+ console.log("\nModalContent.constructor: " + JSON.stringify(params));
+ this.navigationVisibility = params.context.navigationVisibility ? "visible" : "collapse";
+ }
+
+ close(layoutRoot: View) {
+ layoutRoot.closeModal();
+ }
+
+ ngOnInit() {
+ }
+
+ ngOnDestroy() {
+ 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 @@
+
+
+
+
+
+
+
+
+
\ 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();
+ }
+}