🤖 Create an engaging chatbot from scratch and add it to your NativeScript app! Learn more at our webinar on March 28th.

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