Uncancelable dialog, programmatically close



Hello everyone,

I’m building an app that requires internet connectivity for any user action. The behaviour I would like is to display a dialog when internet connectivity disappears. This dialog should not be closable by clicking outside the dialog, there should not be any button inside the dialog and I should be able to close it programmatically when internet connectivity is back.


Here is a summary of what I tried.

First try in app.module.ts, using

application.on(application.launchEvent, args => {
    connectivity.startMonitoring(function onConnectionTypeChanged(
            newConnectionType: number
        ) {
               Logic to open dialogs.alert({ cancelable: false }) when needed

Here dialogs.alert() returns a Promise, as any function dialogs.[something], so I can’t have access to the dialogs instance, and it will never be closed.

Second try, creating my own component for the modal, but that means I have to use the function

this.modalDialogService.showModal(ConnectivityDialogComponent, options);

which will create the instance of the component, which I will not have access to, so I will never be able to close it. The only way to access it, is to expose the instance as a static variable of the class (as a singleton would do) so here is the resulting code

import { Component } from '@angular/core';
import { ModalDialogParams } from 'nativescript-angular/modal-dialog';

    selector: 'connectivity-dialog',
    template: `
    <StackLayout margin="24" horizontalAlignment="center" verticalAlignment="center">
        <Label text="Network connectivity is unavailable."></Label>
export class ConnectivityDialogComponent {
    static singleton: ConnectivityDialogComponent;

    prompt: string;
    constructor(private params: ModalDialogParams) {
        if (ConnectivityDialogComponent.singleton) {
            return ConnectivityDialogComponent.singleton;
        } else {
            this.prompt = params.context.promptMsg;
            ConnectivityDialogComponent.singleton = this;

    close() {

Here I have a dialog that I can close… But I can’t make it uncancelable by the user if he taps outside the dialog!

Any help would be greatly appreciated.


You can do something like this,



How can this be done in plain Nativescript?


It works on plain nativescript also.



hi @manojdcoder

This is not working on Angular after updating the tns-android to 4.1.2, could you please confirm?

thank you.


As I already mentioned it was compatible with {N} 3.x, now with 4.x you can have any component as your root / modal. You will just have to change this to get it working back in modal component.

<StackLayout class="page" (loaded)="onLoaded($event)">
	<Label textWrap="true" text="This dialog can't be closed by touching outside of modal." class="m-5 text-center h2"></Label>
	<Button text="Click here to close" class="m-5 btn btn-primary" (tap)="onTapCloseButton()"></Button>
import { Component, ViewChild, ElementRef } from "@angular/core";
import { ModalDialogParams } from "nativescript-angular/modal-dialog";

import { isAndroid } from "platform";
import { Page } from "ui/page";

	moduleId: module.id,
	templateUrl: "./modal.component.html",
export class ModalComponent {

		private params: ModalDialogParams
	) { }

	onLoaded(event) {
		if (isAndroid) {

	onTapCloseButton() {


Thank you, figured that out after posting it.