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