CODEWITHSUNDEEP
angularjsangular-materialmddialog
Flygenring
Flygenring

Reputation: 3848

Using Angular Material, is it possible to close a specific dialog

I have an AngularJS app using the Angular Material UI framework.

The app has different mechanisms showing dialogs (e.g error and loading spinner) and it would be preferable to only close one specifically chosen in certain scenarios, e.g. when an AJAX request is finished fetching data, I would like my loading spinner to close, but not any error dialog that may be the result of the fetching.

What I can find in documentation and code doesn't agree (though code should win the argument):

I have made a demo of my intent, as MCV as possible – these are the highlights:

var dialog = {},
    promise = {};

function showDialogs(sourceEvent) {
    showDialog(sourceEvent, "one");
    showDialog(sourceEvent, "two");
}

function showDialog(sourceEvent, id) {
    dialog[id] = $mdDialog.alert({...});

    promise[id] = $mdDialog.show(dialog[id]);
    promise[id].finally(function() {
        dialog[id] = undefined;
    });
}

function closeDialogs() {
    $mdDialog.hide("Closed all for a reason", {closeAll: true});
}

function closeDialogLatest() {
    $mdDialog.hide("Closed from the outside");
}

function closeDialogReason() {
    $mdDialog.hide("Closed with a reason");
}

function closeDialogSpecific(id) {
    $mdDialog.hide(dialog[id], "finished");
}

EDIT:
I know the code always wins the argument about what happens, but I wasn't entirely sure it was the right code I was looking at.
I have updated the examples to better test and illustrate my point and problem. This shows things to work as the code said.

What I'm really looking for is whether it might still be possible to achieve my goal in some other way that I didn't think of yet.

Upvotes: 3

Views: 2668

Answers (2)

Flygenring
Flygenring

Reputation: 3848

Using $mdPanel instead of $mdDialog I was able to achieve the desired effect; I forked my demo to reflect the changes – these are the highlights:

var dialog = {};

function showDialogs() {
    showDialog("one");
    showDialog("two");
}

function showDialog(id) {
    var config = {...};

    $mdPanel.open(config)
        .then(function(panelRef) {
            dialog[id] = panelRef;
        });
}

function closeDialogs() {
    var id;

    for(id in dialog) {
        closeDialogSpecific(id, "Closed all for a reason");
    }
}

function closeDialogSpecific(id, reason) {
    var message = reason || "finished: " + id;

    if(!dialog.hasOwnProperty(id) || !angular.isObject(dialog[id])) {
        return;
    }

    if(dialog[id] && dialog[id].close) {
        dialog[id].close()
            .then(function() {
                vm.feedback = message;
            });
        dialog[id] = undefined;
    }
}

Upvotes: 4

camden_kid
camden_kid

Reputation: 12813

I would suggest having two or more dialogs up at the same time isn't ideal and probably not recommended by Google Material design.

To quote from the docs

Use dialogs sparingly because they are interruptive.

You say:

when an AJAX request is finished fetching data, I would like my loading spinner to close, but not any error dialog that may be the result of the fetching.

My solution here would be to have one dialog which initially shows the spinner. Once the request is finished replace the spinner with any messages.

Upvotes: 2

Related Questions