diff --git a/app/app.module.ts b/app/app.module.ts
index 0298ad3b..a9885a32 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -1,14 +1,11 @@
-// this import should be first in order to load some required settings (like globals and reflect-metadata)
// >> ngmodule-config
-// >> (hide)
+// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
-
import { routes } from "./app.routes";
import { AppComponent } from "./app.component";
-// << (hide)
import { ModalDialogService } from "nativescript-angular/modal-dialog";
@NgModule({
@@ -27,5 +24,6 @@ import { ModalDialogService } from "nativescript-angular/modal-dialog";
ModalDialogService,
]
})
-// << ngmodule-config
+
export class AppModule { }
+// << ngmodule-config
diff --git a/app/ng-ui-category/modal-view-ng/modal-view-actionbar/article.md b/app/ng-ui-category/modal-view-ng/modal-view-actionbar/article.md
index 2fee588d..eb42dddf 100644
--- a/app/ng-ui-category/modal-view-ng/modal-view-actionbar/article.md
+++ b/app/ng-ui-category/modal-view-ng/modal-view-actionbar/article.md
@@ -1,17 +1,16 @@
-Modal Dialog with ActionBar
+The following example is demonstrating how to create a modal page with `ActionBar`. The **_main-view.component_** is the page from which, you will open the root modal (**_modal-root.component_**). The root modal contains a `page-router-outlet` and has a default navigation to **_modal-view.component_** while using the children routing configuration.
-Defining the main page component
+**_main-view.component.html_** and **_main-view.component.ts_**
-Definig modal view innner component's routes
-
+Routing configuration file (**_modal-view-examples.module.ts_**) which sets the children routes (in this example the `modal-view` path).
-Defining the modal root component
+**_modal-root.component.html_** and **_modal-root.component.ts_** contains `page-router-outlet` with default navigation via `modal-view` path.
-Defining the modal view component with an ActionBar
+**_modal-view.component.html_** and **_modal-view.component.ts_** (the default `modal-view` path). The modal contains `ActionBar`.
-
\ No newline at end of file
+
diff --git a/app/ng-ui-category/modal-view-ng/modal-view-actionbar/main-view.component.html b/app/ng-ui-category/modal-view-ng/modal-view-actionbar/main-view.component.html
index 659e563f..cfd2e873 100644
--- a/app/ng-ui-category/modal-view-ng/modal-view-actionbar/main-view.component.html
+++ b/app/ng-ui-category/modal-view-ng/modal-view-actionbar/main-view.component.html
@@ -1,4 +1,5 @@
+
diff --git a/app/ng-ui-category/modal-view-ng/modal-view-actionbar/main-view.component.ts b/app/ng-ui-category/modal-view-ng/modal-view-actionbar/main-view.component.ts
index 4fe7eabd..b846324d 100644
--- a/app/ng-ui-category/modal-view-ng/modal-view-actionbar/main-view.component.ts
+++ b/app/ng-ui-category/modal-view-ng/modal-view-actionbar/main-view.component.ts
@@ -1,6 +1,7 @@
+// >> main-view-code
+// main-view.component.ts
import { Component, OnInit, ViewContainerRef } from "@angular/core";
import { ModalDialogOptions, ModalDialogService } from "nativescript-angular/modal-dialog";
-
import { ModalRootComponent } from "./modal-root.component";
@Component({
@@ -14,7 +15,7 @@ export class MainViewComponent implements OnInit {
private _vcRef: ViewContainerRef) { }
ngOnInit(): void { }
- // >> main-view-code
+
onTap(): void {
const options: ModalDialogOptions = {
viewContainerRef: this._vcRef,
@@ -27,5 +28,5 @@ export class MainViewComponent implements OnInit {
console.log(result);
});
}
- // << main-view-code
}
+// << main-view-code
diff --git a/app/ng-ui-category/modal-view-ng/modal-view-navigation/article.md b/app/ng-ui-category/modal-view-ng/modal-view-navigation/article.md
index 35776dac..1cac2143 100644
--- a/app/ng-ui-category/modal-view-ng/modal-view-navigation/article.md
+++ b/app/ng-ui-category/modal-view-ng/modal-view-navigation/article.md
@@ -1,29 +1,35 @@
-Modal Dialog Navigation
+The following example demonstrates how to enable navigaiton within a modal page. First we have a component which opens the main root modal. The root modal contains a `page-router-outlet` which has a default navigaiton via the `modal` route (loads the **_home-modal-view-content.component_**). The router outlet has its own routing table (**_modal-view-examples.module.ts_**) and can navigate to the `second-modal` route within the root modal.
-@NgModule config
+Providing the `ModalDialogService` in `@NgModule` config.
+**_app.module.ts_**
-Defining the `page-router-outlet` for the modal view's main component and navigating to the first inner modal view
+The component (**_modal-view-navigation.component_**) which opens the root modal view (**_home-modal-view.component_**).
-
-
-
-Definig modal view innner component's routes
+**_modal-view-navigation.component.html_** and **_modal-view-navigation.component.ts**
+
+
+Routing configuration file (**_modal-view-examples.module.ts_**) which sets the children routes (in this example the `modal` and `second-modal` path).
-Defining the first inner modal view
+The root modal component contains the `page-router-outlet` and has a default navigation to the first inner modal view.
+
+**_home-modal-view.component.html_** and **_home-modal-view.component.ts_**
+
+
+Defining the first inner modal view (the `modal` route).
+
+**_home-modal-view-content.component.html_** and **_home-modal-view-content.component.ts_**
-> NB: We can navigate to the second component inside the Modal view while defining its relative path(e.g. `"../second-modal"`). To navigate relatively, we should use ActiveRouter module as it is demonstrated in the example above.
+> **Note:** We can navigate to the second component inside the Modal view while defining its relative path(e.g. `"../second-modal"`). To navigate relatively, we should use ActiveRouter module as it is demonstrated in the example above.
-Defining the second inner modal view
+Defining the first inner modal view (the `second-modal` route).
+**_second-modal-view-content.component.html_** and **_second-modal-view-content.component.ts_**
-Opening the modal view
-
-
\ No newline at end of file
diff --git a/app/ng-ui-category/modal-view-ng/modal-view-navigation/modal-view-navigation.component.html b/app/ng-ui-category/modal-view-ng/modal-view-navigation/modal-view-navigation.component.html
index eaaaeec9..6525fa71 100644
--- a/app/ng-ui-category/modal-view-ng/modal-view-navigation/modal-view-navigation.component.html
+++ b/app/ng-ui-category/modal-view-ng/modal-view-navigation/modal-view-navigation.component.html
@@ -1,3 +1,6 @@
+
+
+
diff --git a/app/ng-ui-category/modal-view-ng/modal-view-navigation/modal-view-navigation.component.ts b/app/ng-ui-category/modal-view-ng/modal-view-navigation/modal-view-navigation.component.ts
index 32f48eec..8160e1be 100644
--- a/app/ng-ui-category/modal-view-ng/modal-view-navigation/modal-view-navigation.component.ts
+++ b/app/ng-ui-category/modal-view-ng/modal-view-navigation/modal-view-navigation.component.ts
@@ -1,4 +1,4 @@
- // >> opening-modal-view
+// >> opening-modal-view
import { Component, ViewContainerRef } from "@angular/core";
import { ModalDialogOptions, ModalDialogService } from "nativescript-angular/modal-dialog";
import { HomeModalViewComponent } from "./home-modal-view.component";
@@ -23,5 +23,5 @@ export class ModalViewNavigationComponent {
console.log(result);
});
}
- // << opening-modal-view
}
+// << opening-modal-view
diff --git a/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/article.md b/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/article.md
index 772172bc..1d4d3982 100644
--- a/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/article.md
+++ b/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/article.md
@@ -1,13 +1,18 @@
Modal Dialog
-@NgModule config
+**_app.module.ts_**
-Add `modal-dialog-host`
+The host component (**_sample-modal-view-module.example.html_**) from which we will open the different modal pages (e.g., **_modal-view.html_**).
+
+**_sample-modal-view-module.example.html_**
-Passing parameters
+Passing parameters from the opened modal view.
+
+**_modal-view.html_** and **_modal-view.ts_**
+
-Returning a result
+Receiving the result from the modal page.
diff --git a/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/modal-view.html b/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/modal-view.html
index f7e8d17b..c5627f6f 100644
--- a/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/modal-view.html
+++ b/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/modal-view.html
@@ -1,4 +1,6 @@
+
+
\ No newline at end of file
diff --git a/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/sample-modal-view-module-example.html b/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/sample-modal-view-module-example.html
index 55239ee4..04751bb7 100644
--- a/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/sample-modal-view-module-example.html
+++ b/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/sample-modal-view-module-example.html
@@ -12,7 +12,6 @@
-
diff --git a/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/sample-modal-view-module-example.ts b/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/sample-modal-view-module-example.ts
index 32726c65..5f4f62be 100644
--- a/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/sample-modal-view-module-example.ts
+++ b/app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/sample-modal-view-module-example.ts
@@ -54,6 +54,7 @@ export class SampleModalViewModuleExampleComponent {
fullscreen: false,
};
+ // showModal returns a promise with the received paramerters from the modal page
return this.modalService.showModal(ModalViewComponent, options);
}
// << returning-result