Use Native Device Dialogs In Ionic Framework Mobile Apps

So you’ve been playing around with Ionic Framework for a while now and have decided that maybe $ionicPopup dialogs are not meeting your needs because they don’t look native enough.  As we’ve come to expect, Apache Cordova has a plugin for us to correct this, giving us native device popup dialogs in our hybrid application.

This guide will show you how to use the Apache Cordova Dialogs plugin in your Ionic Framework Android and iOS mobile application.

Let’s start by creating a fresh Ionic project for Android and iOS:

Note that if you’re not using a Mac computer, you cannot add and build for the iOS platform.

Since we’ll be using the Apache Cordova Dialogs plugin, we’ll need to install it from the official repository.  With your current directory being the Ionic project, run the following from your Terminal or command prompt:

The following are the available dialog types for Android and iOS:

  • alert
  • confirm
  • prompt
  • beep

However, we’ll be focusing strictly on the confirm dialog type because it allows us to use multiple buttons.  Taken from the plugin documentation, to show a dialog, we must execute the following statement from our project’s code:

The confirm dialog has allows four parameters to be passed, where two of them can be optional as they have default values.  Descriptions of these four parameters can be seen below:


Parameter NameTypeDescription
messagestringThe text to display in your prompt
callbackfunction(buttonIndex)The callback to be executed upon button click
titlestringOptional title for the dialog prompt
labelsarrayNames for each button in order

With this knowledge, it is time to create a working example.  Open your www/js/app.js file and add the following controller:

We’re assuming that you’ve named your angular.module ionicApp, otherwise you’ll probably get an error when using the controller.

In the example, when the confirmDialog is called from one of your HTML pages it will show a confirmation dialog with three buttons.  Although I decided to make them as negative, neutral, and positive, it really doesn’t matter what you call them or how you treat them.

When clicking a button it will fire the callback and perform an action based on the button index.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Hey Nic, thanks for sharing this article! Just thought it’s worth complementing and mentioning that if you’re already using ngCordova, the $cordovaDialogs plugin can simplify this even more: http://ngcordova.com/docs/plugins/dialogs/

    • Yep, thanks for mentioning and thanks for the compliment!

      • Shahnewaz Khan

        Hi Nic,

        Great Article! I ended up using the $cordovaDialogs plugin and was able to implement the prompt. Do you know how I can go about customizing the look and feel of the $cordovaDialog? Thanks in advance!

        • You’d need to alter the plugin code directly. The plugin uses the most basic native dialogs. Theming would need to be added if you want to customize it. I suggest you reach out to Apache on this one.

          Regards,

          • Shahnewaz Khan

            I will do so, thanks!

  • angu

    navigator.notification.activityStart(“Please wait….”, “loading”); not working. can you help me?

  • Too bad there is no “password” options to hide the inputed text of prompt dialogs with asterisks. (for password input)

  • Reza Riantono

    Hi Nic. Thanks for sharing. In my case this doesnt work on IOS though, nothing shows up. It works fine in Android. Any idea why?

    • What do your logs say?

      • Reza Riantono

        Sorry. It was a mistake on my part. I left out the callback. Anyway, thanks for your respond

        • No problem, I’m glad you got it 🙂

  • wxy

    hI Nic, i can use this plugin in the devise, but , when i use callback function ,the view will not update ,and data binding not work when i click anywhere

    • Rather than sharing code, what do your logs say?

  • BeinTech Dev

    Hi Nic i try to use alert but it doesn’t work and i have any error. However when i do alert(‘my message’) it’s work!

    • How are you checking your logs?

      Alert = JavaScript alert, not native dialog. Two very different things.

      I guarantee there are errors in your logs.

      Regards,

  • BeinTech Dev

    Nic I got it work but i use a different method i can post it if you are interesting. Thanks

    • Explaining your process in the comments would be nice 🙂

  • BeinTech Dev

    I got it working using the code below:
    I create a Factory in my controller to listen when device is ready:

    app.factory(‘cordova’, function() {
    return {
    ready: function(msg) {
    document.addEventListener(‘deviceready’, function() {
    function alertDismissed() {
    ionic.Platform.exitApp();
    }
    navigator.notification.alert(msg, alertDismissed, “Avertissement”, “Ok”);
    }, false);
    }
    }
    });
    I call it after like this: cordova.ready(msg);

    It is explained on documentation: https://github.com/apache/cordova-plugin-dialogs. Thanks :Xd

  • perfect as always, thanks Nic

  • airball

    Hey Nic, are you aware of a way to programmatically dismiss alerts created with this plugin? For example, I’m interested in automatically closing an alert if it has not been dismissed by the user within 1 minute.

    • I don’t believe native dialogs can be programmatically dismissed. You might ask in the forums just to be sure.

      Best,

      • airball

        I think you’re right, thank you. I’ll use $ionicPopup or a custom modal for this requirement.

  • technotip

    No way to use simply html as message using the above mentioned plugin?

    • It is a native dialog. It understands text only. You’d have to use an Ionic pop up which is HTML if you wish to use HTML as the message.

      • technotip

        Ya I tried that, but the problem with IONIC PopUp is we can’t scale the width of the pop up 🙁

  • Murilo Zilli

    Error: Registry returned 404 for GET on https://registry.npmjs.org/org.apache.cordova.dialogs