Uncancelable dialog, programmatically close

android

#1

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.

Summary

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';

@Component({
    selector: 'connectivity-dialog',
    template: `
    <StackLayout margin="24" horizontalAlignment="center" verticalAlignment="center">
        <Label text="Network connectivity is unavailable."></Label>
    </StackLayout>
  `,
})
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() {
        this.params.closeCallback();
    }
}

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.


#2

You can do something like this,

(<any>this.page)._dialogFragment.getDialog().setCanceledOnTouchOutside(false);

#3

How can this be done in plain Nativescript?


#4

It works on plain nativescript also.

(page)._dialogFragment.getDialog().setCanceledOnTouchOutside(false);


#5

hi @manojdcoder

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

thank you.


#6

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>
</StackLayout>
import { Component, ViewChild, ElementRef } from "@angular/core";
import { ModalDialogParams } from "nativescript-angular/modal-dialog";

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

@Component({
	moduleId: module.id,
	templateUrl: "./modal.component.html",
})
export class ModalComponent {

	constructor(
		private params: ModalDialogParams
	) { }

	onLoaded(event) {
		if (isAndroid) {
			event.object._dialogFragment.getDialog().setCanceledOnTouchOutside(false);
		}
	}

	onTapCloseButton() {
		this.params.closeCallback();
	}
}

#7

Thank you, figured that out after posting it.