|
| 1 | +import {Component, ChangeDetectionStrategy} from '@angular/core'; |
| 2 | +import * as dialogs from "ui/dialogs"; |
| 3 | +import {ModalDialogService, ModalDialogOptions, ModalDialogHost, ModalDialogParams} from "nativescript-angular/directives/dialogs"; |
| 4 | + |
| 5 | + |
| 6 | +@Component({ |
| 7 | + selector: 'modal-content', |
| 8 | + template: ` |
| 9 | + <StackLayout margin="24" horizontalAlignment="center" verticalAlignment="center"> |
| 10 | + <Label [text]="prompt"></Label> |
| 11 | + <StackLayout orientation="horizontal" marginTop="12"> |
| 12 | + <Button text="ok" (tap)="close('OK')"></Button> |
| 13 | + <Button text="cancel" (tap)="close('Cancel')"></Button> |
| 14 | + </StackLayout> |
| 15 | + </StackLayout> |
| 16 | + ` |
| 17 | +}) |
| 18 | +class ModalContent { |
| 19 | + public prompt: string; |
| 20 | + constructor(private params: ModalDialogParams) { |
| 21 | + this.prompt = params.context.message; |
| 22 | + } |
| 23 | + |
| 24 | + public close(res: string) { |
| 25 | + this.params.closeCallback(res); |
| 26 | + } |
| 27 | +} |
| 28 | + |
| 29 | +const TEMPLATE = ` |
| 30 | +<GridLayout rows="*, auto" modal-dialog-host> |
| 31 | + <Button text="show component" (tap)="showModal()"></Button> |
| 32 | + |
| 33 | + <Label [text]="'RESULT: ' + result" row="1" margin="12"></Label> |
| 34 | +</GridLayout> |
| 35 | +`; |
| 36 | + |
| 37 | +@Component({ |
| 38 | + selector: 'modal-test', |
| 39 | + directives: [ModalDialogHost], |
| 40 | + providers: [ModalDialogService], |
| 41 | + template: TEMPLATE |
| 42 | +}) |
| 43 | +export class ModalTest { |
| 44 | + public result: string = "---"; |
| 45 | + |
| 46 | + constructor(private modal: ModalDialogService) { } |
| 47 | + |
| 48 | + public showModal() { |
| 49 | + const options: ModalDialogOptions = { |
| 50 | + context: { message: "Hello from dialog!" }, |
| 51 | + fullscreen: true |
| 52 | + }; |
| 53 | + |
| 54 | + this.modal.showModal(ModalContent, options).then((res: string) => { |
| 55 | + this.result = res || "empty result"; |
| 56 | + }) |
| 57 | + } |
| 58 | +} |
| 59 | + |
| 60 | +@Component({ |
| 61 | + selector: 'modal-test-on-push', |
| 62 | + directives: [ModalDialogHost], |
| 63 | + providers: [ModalDialogService], |
| 64 | + changeDetection: ChangeDetectionStrategy.OnPush, |
| 65 | + template: TEMPLATE |
| 66 | +}) |
| 67 | +export class ModalTestWithPushStrategy { |
| 68 | + public result: string = "---"; |
| 69 | + |
| 70 | + constructor(private modal: ModalDialogService) { } |
| 71 | + |
| 72 | + public showModal() { |
| 73 | + const options: ModalDialogOptions = { |
| 74 | + context: { message: "Hello from dialog (onPush)!" }, |
| 75 | + fullscreen: true |
| 76 | + }; |
| 77 | + |
| 78 | + this.modal.showModal(ModalContent, options).then((res: string) => { |
| 79 | + this.result = res || "empty result"; |
| 80 | + }) |
| 81 | + } |
| 82 | +} |
0 commit comments