📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

Modal View Ng

Modal Dialog

Modal Dialog with ActionBar

Defining the main page component

<StackLayout class="page" sdkExampleTitle sdkToggleNavButton>
    <Button text="SHOW MODAL" (tap)="onTap()"></Button>
</StackLayout>
onTap(): void {
    const options: ModalDialogOptions = {
        viewContainerRef: this._vcRef,
        context: {},
        fullscreen: true
    };

    this._modalService.showModal(ModalRootComponent, options)
        .then((result: string) => {
            console.log(result);
        });
}

Definig modal view innner component's routes

{
    path: "modal-view-actionbar",
    component: MainViewComponent,
    data: { title: "Main page" },
    children: [
        {
            path: "modal-view", component: ModalViewActionBarComponent
        }
    ]
}

Defining the modal root component

<page-router-outlet></page-router-outlet>
import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { ActivatedRoute } from "@angular/router";

@Component({
    moduleId: module.id,
    templateUrl: "./modal-root.component.html"
})
export class ModalRootComponent implements OnInit {
    constructor(
        private _routerExtensions: RouterExtensions,
        private _activeRoute: ActivatedRoute) {}

    ngOnInit(): void {
        this._routerExtensions.navigate(["modal-view"], { relativeTo: this._activeRoute });
    }
}

Defining the modal view component with an ActionBar

<ActionBar backgroundColor="red" title="MODAL VIEW" class="action-bar">
</ActionBar>

<StackLayout backgroundColor="green" class="page">
    <Label class="my-label" style="text-align: center;" text="Modal view with ActionBar" textWrap="true"></Label>
    <Button text="CLOSE MODAL" (tap)="onClose()"></Button>
</StackLayout>
import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { ActivatedRoute } from "@angular/router";
import { ModalDialogParams } from "nativescript-angular/modal-dialog";
import { Page } from "tns-core-modules/ui/page";

@Component({
    moduleId: module.id,
    templateUrl: "./modal-view.component.html",
    styleUrls: ["./modal-view.component.css"]
})
export class ModalViewActionBarComponent implements OnInit {
    constructor(private _params: ModalDialogParams, private _page: Page, private router: RouterExtensions, private _activeRoute: ActivatedRoute) {}

    ngOnInit(): void {}
    onClose(): void {
        this._params.closeCallback("return value");
    }
}

Improve this document

Demo Source


Modal Dialog Navigation

@NgModule config

import { ModalDialogService } from "nativescript-angular/modal-dialog";

@NgModule({
    schemas: [NO_ERRORS_SCHEMA],
    declarations: [
        AppComponent,
    ],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(routes),
    ],
    providers: [
        ModalDialogService,
    ]
})

Defining the page-router-outlet for the modal view's main component and navigating to the first inner modal view

<page-router-outlet></page-router-outlet>
import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { ActivatedRoute } from "@angular/router";

@Component({
    moduleId: module.id,
    templateUrl: "./home-modal-view.component.html"
})
export class HomeModalViewComponent implements OnInit {
    constructor(
        private _routerExtensions: RouterExtensions,
        private _activeRoute: ActivatedRoute) {}

    ngOnInit(): void {
        this._routerExtensions.navigate(["modal"], { relativeTo: this._activeRoute });
    }
}

Definig modal view innner component's routes

{
    path: "modal-view-navigation",
    component: ModalViewNavigationComponent,
    data: { title: "Modal view navigation" },
    children: [
        {
            path: "modal", component: HomeModalViewContentComponent
        },
        {
            path: "second-modal", component: SecondModalViewContentComponent
        }
    ]
},

Defining the first inner modal view

<ActionBar title="MODAL VIEW" class="action-bar">
</ActionBar>

<StackLayout class="page">
    <Label class="my-label" text="First Modal View" textWrap="true"></Label>
    <Button text="Next" (tap)="onNavigate()"></Button>
    <Button text="CLOSE MODAL" (tap)="onClose()"></Button>
</StackLayout>
import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { ActivatedRoute } from "@angular/router";
import { ModalDialogParams } from "nativescript-angular/modal-dialog";
import { Page } from "tns-core-modules/ui/page";

@Component({
    moduleId: module.id,
    templateUrl: "./home-modal-view-content.component.html",
    styleUrls: ["./home-modal-view-content.component.css"]
})
export class HomeModalViewContentComponent implements OnInit {
    constructor(private _params: ModalDialogParams, private _page: Page, private router: RouterExtensions, private _activeRoute: ActivatedRoute) {}

    ngOnInit(): void {}
    onNavigate(): void {
        this.router.navigate(["../second-modal"], { relativeTo: this._activeRoute });
    }
    onClose(): void {
        this._params.closeCallback("return value");
    }
}

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.

Defining the second inner modal view

<ActionBar title="SECOND MODAL VIEW" class="action-bar">
</ActionBar>

<StackLayout class="page">

    <Label class="my-label" text="Second Modal view" textWrap="true"></Label>
    <Button text="Go Back" (tap)="onBack()"></Button>
    <Button text="CLOSE MODAL" (tap)="onClose()"></Button>
</StackLayout>
import { Component } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { ModalDialogParams } from "nativescript-angular/modal-dialog";

@Component({
    moduleId: module.id,
    templateUrl: "./second-modal-view-content.component.html",
    styleUrls: ["./second-modal-view-content.component.css"]
})
export class SecondModalViewContentComponent  {
    constructor(private _params: ModalDialogParams, private router: RouterExtensions) { }

    onBack(): void {
        this.router.back();
    }
    onClose(): void {
        this._params.closeCallback("return value");
    }
}

Opening the modal view

import { Component, ViewContainerRef } from "@angular/core";
import { ModalDialogOptions, ModalDialogService } from "nativescript-angular/modal-dialog";
import { HomeModalViewComponent } from "./home-modal-view.component";

@Component({
    moduleId: module.id,
    providers: [ModalDialogService],
    templateUrl: "./modal-view-navigation.component.html"
})
export class ModalViewNavigationComponent {
    constructor(private _modalService: ModalDialogService, private _vcRef: ViewContainerRef) { }

    onTap(): void {
        const options: ModalDialogOptions = {
            viewContainerRef: this._vcRef,
            context: {},
            fullscreen: true
        };

        this._modalService.showModal(HomeModalViewComponent, options)
            .then((result: string) => {
                console.log(result);
            });
    }

Improve this document

Demo Source


Sample Modal View Module Example

Modal Dialog

@NgModule config

import { ModalDialogService } from "nativescript-angular/modal-dialog";

@NgModule({
    schemas: [NO_ERRORS_SCHEMA],
    declarations: [
        AppComponent,
    ],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(routes),
    ],
    providers: [
        ModalDialogService,
    ]
})

Add modal-dialog-host

<ScrollView sdkExampleTitle sdkToggleNavButton >
    <StackLayout>
        <Label text='Count the days between the dates' class="m-15 h2" textWrap="true"></Label>

        <Label [text]='startDate | date:"MM/dd/yy"' class="m-15" textWrap="true"></Label>  
        <Button class="btn btn-primary btn-active" text="Enter Start Date" (tap)="getStartDate()"></Button>

        <Label [text]='endDate | date:"MM/dd/yy"' class="m-15" textWrap="true"></Label>   
        <Button class="btn btn-primary btn-active" text="Enter End Date" (tap)="getEndDate()"></Button>

        <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>
        <Label [text]='"Weekday: " + (selectedDate | date: "EEEE")' class="m-15" textWrap="true"></Label>
        <Button class="btn btn-primary btn-active" text="Enter Date" (tap)="getDate()"></Button>   
    </StackLayout>
</ScrollView>

Passing parameters

import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
import { ModalDialogParams } from "nativescript-angular/modal-dialog";
import { DatePicker } from "tns-core-modules/ui/date-picker";

@Component({
    moduleId: module.id,
    templateUrl: "./modal-view.html",
})
export class ModalViewComponent implements OnInit {
    public currentdate: Date;
    @ViewChild("datepicker") datePickerElement: ElementRef;

    constructor(private params: ModalDialogParams) {
        this.currentdate = new Date(params.context);
    }

    ngOnInit() {
        let datePicker: DatePicker = <DatePicker>this.datePickerElement.nativeElement;
        datePicker.year = this.currentdate.getFullYear();
        datePicker.month = this.currentdate.getMonth() + 1;
        datePicker.day = this.currentdate.getDate();
        datePicker.minDate = new Date(1975, 0, 29);
        datePicker.maxDate = new Date(2045, 4, 12);
    }

    public submit() {
        let datePicker: DatePicker = <DatePicker>this.datePickerElement.nativeElement;
        console.log("date result");
        console.log(datePicker.date);
        this.params.closeCallback(datePicker.date);
    }
}

Returning a result

getDate() {
    this.createModelView().then(result => {
        if (this.validate(result)) {
            this.selectedDate = result;
        }
    }).catch(error => this.handleError(error));
}

private createModelView(): Promise<any> {
    const today = new Date();
    const options: ModalDialogOptions = {
        viewContainerRef: this.vcRef,
        context: today.toDateString(),
        fullscreen: false,
    };

    return this.modalService.showModal(ModalViewComponent, options);
}

Improve this document

Demo Source