Modal dialogs page

Author: vakrilov

app/main/main-page-router-outlet.ts

@@ -9,10 +9,12 @@ import {FirstComponent} from "../components/first.component";
 import {SecondComponent} from "../components/second.component";
 import {NavigationTestRouter} from "../router/router-outlet";
 import {BindingComponent} from "../binding/binding-page";
+import {ModalTest, ModalTestWithPushStrategy} from "../modal/modal-dialog.component";
 
 @Component({
     selector: "main",
     directives: [NS_ROUTER_DIRECTIVES],
+    styles: [ 'button { margin: 0 6 }' ],
     template: `
     <StackLayout>
         <Label text="Main Component" class="title"></Label>
@@ -29,7 +31,11 @@ import {BindingComponent} from "../binding/binding-page";
             <Button text="ActionBar1" [nsRouterLink]="['FirstActionBar']"></Button>
             <Button text="ActionBar2" [nsRouterLink]="['SecondActionBar']"></Button>
         </StackLayout>
-        <Button text="Binding" [nsRouterLink]="['Binding']"></Button>        
+        <Button text="Binding" [nsRouterLink]="['Binding']"></Button>      
+        <StackLayout orientation="horizontal" horizontalAlignment="center">
+            <Button text="modal" [nsRouterLink]="['Modal']"></Button>
+            <Button text="modal(onPush)" [nsRouterLink]="['ModalWithPushStrategy']"></Button>
+        </StackLayout>  
     </StackLayout>
     `,
 })
@@ -50,6 +56,8 @@ class MainComponent { }
     { path: '/first-action-bar', component: FirstComponentActionBar, name: 'FirstActionBar' },
     { path: '/second-action-bar', component: SecondComponentActionBar, name: 'SecondActionBar' },
     { path: '/binding', component: BindingComponent, name: 'Binding' },
+    { path: '/modal', component: ModalTest, name: 'Modal' },
+    { path: '/modal-on-push', component: ModalTestWithPushStrategy, name: 'ModalWithPushStrategy' },
 
 ])
 export class NavigationMainPageRouter { }

app/modal/modal-dialog.component.ts

@@ -0,0 +1,82 @@
+import {Component, ChangeDetectionStrategy} from '@angular/core';
+import * as dialogs from "ui/dialogs";
+import {ModalDialogService, ModalDialogOptions, ModalDialogHost, ModalDialogParams} from "nativescript-angular/directives/dialogs";
+
+
+@Component({
+    selector: 'modal-content',
+    template: `
+    <StackLayout margin="24" horizontalAlignment="center" verticalAlignment="center">
+        <Label [text]="prompt"></Label>
+        <StackLayout orientation="horizontal" marginTop="12">
+            <Button text="ok" (tap)="close('OK')"></Button>
+            <Button text="cancel" (tap)="close('Cancel')"></Button>
+        </StackLayout>
+    </StackLayout>
+    `
+})
+class ModalContent {
+    public prompt: string;
+    constructor(private params: ModalDialogParams) {
+        this.prompt = params.context.message;
+    }
+
+    public close(res: string) {
+        this.params.closeCallback(res);
+    }
+}
+
+const TEMPLATE = `
+<GridLayout rows="*, auto" modal-dialog-host>
+    <Button text="show component" (tap)="showModal()"></Button>
+    
+    <Label [text]="'RESULT: ' + result" row="1" margin="12"></Label>
+</GridLayout>
+`;
+
+@Component({
+    selector: 'modal-test',
+    directives: [ModalDialogHost],
+    providers: [ModalDialogService],
+    template: TEMPLATE
+})
+export class ModalTest {
+    public result: string = "---";
+
+    constructor(private modal: ModalDialogService) { }
+
+    public showModal() {
+        const options: ModalDialogOptions = {
+            context: { message: "Hello from dialog!" },
+            fullscreen: true
+        };
+
+        this.modal.showModal(ModalContent, options).then((res: string) => {
+            this.result = res || "empty result";
+        })
+    }
+}
+
+@Component({
+    selector: 'modal-test-on-push',
+    directives: [ModalDialogHost],
+    providers: [ModalDialogService],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: TEMPLATE
+})
+export class ModalTestWithPushStrategy {
+    public result: string = "---";
+
+    constructor(private modal: ModalDialogService) { }
+
+    public showModal() {
+        const options: ModalDialogOptions = {
+            context: { message: "Hello from dialog (onPush)!" },
+            fullscreen: true
+        };
+
+        this.modal.showModal(ModalContent, options).then((res: string) => {
+            this.result = res || "empty result";
+        })
+    }
+}

package.json

@@ -6,7 +6,7 @@
 	"nativescript": {
 		"id": "org.nativescript.testsappng",
 		"tns-ios": {
-			"version": "2.0.0"
+			"version": "2.0.1"
 		},
 		"tns-android": {
 			"version": "2.1.0-2016-05-20-601"