Ionic 2 Open Email Client

Does anyone know of a working example showing how to open the default email program while populating “To” address in Ionic2? I have a list of email addresses and when I click on one I would like to open the default client.

I am pretty new to Ionic and I have scene some conflicting info about which cordova plugin to use.

Thanks !!

What about mailto?

<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">Send Mail</a>
3 Likes

I made this implementation in my (ionic 2) app:

//javascript
mailto(email) {
   window.open(`mailto:${email}`, '_system');
}

in other words, use window.open targeting system defaults.
It works, too, with other pŕotocols (tel:, http:, etc…)

I installed the inappbrowser plugin.

5 Likes

Is inappbrowser an absolute requirement for maito: and tel:? I just did window.location=“blahblah@blah” in a function in Android, and it worked perfectly. However, doing the same in iOS gives an error even though all of the items are correctly listed in the config.xml (allow-intent href=“mailto:*”):

The iOS error: ERROR internal navigation rejected - allow-navigation not set for url=“mailto:blahblah@blah

UPDATE: I added the allow-navigation lines under platform name-“ios” in config.xml. I’m not getting navigation errors anymore. I’m still getting URL can’t be shown, but I think that might be because I’m in an emulator. I"ll update once I can get it deployed to a phone (getting a bunch of entitlements errors when trying to deploy to a physical device. I hate iOS so much)

UPDATE AGAIN: Confirmed. Just add allow-navigation tags as stated above. It works on a physical device.

There are two there is an email one and the social one. Both have a solution. Look at those, I used the email one.

This works for me. To apply it to a list of emails, you could parameterize the mailto link:

<ion-item *ngFor="let user of users">
  <a [href]="'mailto:' + user.email + '?Subject=My%20Custom%20Subject'">
    {{user.name}}. . .{{user.email}} //etc.
  </a>
</ion-item>
1 Like