my-modal-component

gistfile1.ts

import { Page } from '@nativescript/core';
import { ModalDialogParams } from "@nativescript/angular";
import { MyModalContext } from '../../models/my.modal-context';


export class MyModalComponentBase<T, R> {
    protected modalContext: MyModalContext<T, R>;
    protected closeCallback: (...args: any[])=> any;

    public get title() {
        return  this.modalContext.title;
    }

    protected get payload() {
        return this.modalContext.payload;
    }

    public get btnOkText() {
        return this.modalContext.btnOkText;
    }

    public get btnCancelText() {
        return this.modalContext.btnCancelText;
    }

    constructor(
        private params: ModalDialogParams,
        private page: Page
        ) {
        this.modalContext = <MyModalContext<T, R>>params.context;
        this.closeCallback = params.closeCallback;

        this.page.on('unload', () => {
            this.params.closeCallback(this.modalContext.defaultResult)
        });
    }
}

my.modal-context.ts

import { ViewContainerRef } from '@angular/core';

export interface MyModalContext<T, R> {
    vcRef: ViewContainerRef;
    title: string;
    payload: T;
    defaultResult: R;
    btnOkText: string;
    btnCancelText: string;
}

vocab-modal.component.html

<GridLayout rows="40,*" verticalAlignment="top" height="100%" class="vocabmodal">
    <FlexboxLayout class="action-container">
        <Button text="Close" (tap)="onCloseTap();"></Button>
    </FlexboxLayout>
    <StackLayout row="1">
        <Label text="Term"></Label>
        <Label text="vocabObj.vocabTerm"></Label>
        <Label text="Definition"></Label>
        <Label text="vocabObj.vocabDef"></Label>
    </StackLayout>
</GridLayout>

vocab-modal.component.ts

import { Component, OnInit } from "@angular/core";
import { ModalDialogParams } from "@nativescript/angular";
import { MyModalComponentBase } from "../my-modal-component-base";
import { Page } from "@nativescript/core";

@Component({
    selector: "vocab-vocab-modal",
    templateUrl: "./vocab-modal.component.html",
    styleUrls: ["./vocab-modal.component.scss"],
})
export class VocabModalComponent
    extends MyModalComponentBase<Object, null>
    implements OnInit {
    vocabObj: Object;
    constructor(params: ModalDialogParams, page: Page) {
        super(params, page);
        this.vocabObj = this.modalContext.payload;
    }

    ngOnInit() {
        // console.log('ngOnInit called');
        // use here if needed
    }

    public ngAfterViewInit() {
        setTimeout(() => {
            // set focus to textview
            // console.log("ngAfterViewInit called");
        }, 600);
    }

    onCloseTap() {
        this.closeCallback(this.vocabObj);
    }
}