Merge pull request #379 from NativeScript/niliev/modal

docs: modal page article improvements

Author: tsonevn

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

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_**
 <snippet id='main-view-html'/>
 <snippet id='main-view-code'/>
 
-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).
 <snippet id='modal-view-routes-actionbar'/>
 
-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.
 <snippet id='modal-root-html'/>
 <snippet id='modal-root-code'/>
 
-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`.
 <snippet id='modal-view-actionbar-html'/>
-<snippet id='modal-view-actionbar-code'/>
+<snippet id='modal-view-actionbar-code'/>

app/ng-ui-category/modal-view-ng/modal-view-actionbar/main-view.component.html

@@ -1,4 +1,5 @@
 <!-- >> main-view-html -->
+<!-- main-view.component.html -->
 <StackLayout class="page" sdkExampleTitle sdkToggleNavButton>
     <Button text="SHOW MODAL" (tap)="onTap()"></Button>
 </StackLayout>

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

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_** 
 <snippet id='ngmodule-config'/>
 
-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_**).
 
-<snippet id='main-modal-view'/>
-<snippet id='main-modal-view-code'/>
-
-Definig modal view innner component's routes
+**_modal-view-navigation.component.html_** and **_modal-view-navigation.component.ts**
+<snippet id='opening-modal-view-html'/>
+<snippet id='opening-modal-view'/>
 
+Routing configuration file (**_modal-view-examples.module.ts_**) which sets the children routes (in this example the `modal` and `second-modal` path).
 <snippet id='modal-view-routes'/>
 
-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_**
+<snippet id='main-modal-view'/>
+<snippet id='main-modal-view-code'/>
 
+Defining the first inner modal view (the `modal` route).
+
+**_home-modal-view-content.component.html_** and **_home-modal-view-content.component.ts_**
 <snippet id='first-modal-view'/>
 <snippet id='first-modal-view-code'/>
 
-> 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_**
 <snippet id='second-modal-view'/>
 <snippet id='second-modal-view-code'/>
 
-Opening the modal view
-
-<snippet id='opening-modal-view'/>

app/ng-ui-category/modal-view-ng/modal-view-navigation/modal-view-navigation.component.html

@@ -1,3 +1,6 @@
+
+<!-- >> opening-modal-view-html --> 
 <StackLayout class="page" sdkExampleTitle sdkToggleNavButton>
     <Button text="SHOW MODAL" (tap)="onTap()"></Button>
 </StackLayout>
+<!-- << opening-modal-view-html --> 

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

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_**
 <snippet id='ngmodule-config'/>
 
-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_**
 <snippet id='add-modal-dialog-host'/>
 
-Passing parameters
+Passing parameters from the opened modal view.
+
+**_modal-view.html_** and **_modal-view.ts_**
+<snippet id='passing-parameters-html'/>
 <snippet id='passing-parameters'/>
 
-Returning a result
+Receiving the result from the modal page.
 <snippet id='returning-result'/>

app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/modal-view.html

@@ -1,4 +1,6 @@
+<!--  >> passing-parameters-html -->
 <StackLayout class="modal-view-style" sdkExampleTitle sdkToggleNavButton>
     <DatePicker #datepicker></DatePicker>
     <Button class="btn btn-primary btn-active" text="Submit" (tap)="submit()"></Button>
 </StackLayout>
+<!--  >> passing-parameters-html -->

app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/sample-modal-view-module-example.html

@@ -12,7 +12,6 @@
         <Label [text]='"Days: " + days' class="m-15" textWrap="true"></Label> 
         <Button class="btn btn-primary btn-active" text="Count Days" (tap)="countDays()"></Button>
 
-
         <Label text='Use different date formats' class="m-15 h2" textWrap="true"></Label>
 
         <Label [text]='"Date: " + (selectedDate | date: "MM/dd/yy")' class="m-15" textWrap="true"></Label>

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