angular- programmatically close alert when a new alert is triggered

Question

I have two kinds of alerts- secondary alerts and delayed alerts Secondary alert messgaes are shown at first and user has to hit OK button to close it.

But there are delayed alerts also..which are triggered by a setTimeout() I'm trying to automatically close secondary alerts when this delayed alert is shown to user

I tried to dismiss the secondary alerts like this

this.secondaryAlertVar.dismiss();

But it's not working.

Here's the code

import { Component, OnInit } from "@angular/core";
import * as dialogs from "tns-core-modules/ui/dialogs";
@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    secondaryAlertVar: any;
    constructor() {
        this.secondaryAlerts(function () { }, 0, "Hhmm... ", "Alert");

        setTimeout(() => {
            this.delayedAlertBox("All other alerts should close automatically when this triggered");
        }, 10000);
    }

    ngOnInit() {
    }

    secondaryAlerts(callback, mode, message, title): any {
      this.secondaryAlertVar =  dialogs
            .alert({
                title: title,
                message: message,
                cancelable: false,
                okButtonText: "OK"
            })
            .then(callback);
    }

    delayedAlertBox(message) {
        this.secondaryAlertVar.dismiss();
        var options = {
            title: "Delayed Alert",
            message: message,
            okButtonText: "Ok",
            cancelable: false,
        };
        dialogs.alert(options).then(() => {
        });
    }
}

Playground Link

Languet

You should probably use rxjs for this. If you did - you could possibly use observable.pipe(takeUntil(delayedAlertBoxState$)) and play around that. :) – Franny

I'm sorry, but I don't use nativescript but I presume this dialog box can produce a promise and you should be able to hook into that with from. – Franny

Take BehaviorSubject from rxjs, observe delayedAlerts. The secondary alert close event should subscribe to delayedAlerts observable. It will work but need to think and use it properly. – Ridge

In your playground link you seems to be used some alert() on tap event. where does it declared – Bolden

` dialogs.alert(options).then(() => { this.secondaryAlertVar.dismiss(); });` will this work? – Overabundance

That alert() is of no use. Deleted it. @Bolden – Languet

Tried that. It won't work. @Fan Cheung – Languet

Answer 1

Try this using rxjs you can achieve this.

import { Component, OnInit } from "@angular/core";
import * as dialogs from "tns-core-modules/ui/dialogs";
import { interval, timer } from 'rxjs';
import { takeUntil } from 'rxjs/operators'
@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

      source = interval(0);
      alive = true;
      secondaryAlertVar: any;

      constructor() {

       const example = this.source.pipe(takeWhile(() => this.alive));
       const subscribe = example.subscribe(val => {
        this.secondaryAlerts(function () { }, 0, "Hhmm... ", "Alert");
       });

        setTimeout(() => {
        this.alive = false;
            this.delayedAlertBox("All other alerts should close automatically when this triggered");
        }, 10000);
    }

    ngOnInit() {
    }

    secondaryAlerts(callback, mode, message, title): any {
      this.secondaryAlertVar =  dialogs
            .alert({
                title: title,
                message: message,
                cancelable: false,
                okButtonText: "OK"
            })
            .then(callback);
    }

    delayedAlertBox(message) {
        this.secondaryAlertVar.dismiss();
        var options = {
            title: "Delayed Alert",
            message: message,
            okButtonText: "Ok",
            cancelable: false,
        };
        dialogs.alert(options).then(() => {
        });
    }
}

Galling

Is this code working? Some of your imports are unused. – Languet

I am updated my answer please check once. I hope it will help you. – Galling

use takeWhile instead of takeUntil. I have updated the answer please check once. – Galling

I tried this code with your latest changes. It's not working. Secondary alerts are not getting closed automatically when delayedAlert occurs. – Languet