CODEWITHSUNDEEP
ionic-frameworkionic-view
CommonSenseCode
CommonSenseCode

Reputation: 25399

how to send email with ionic framework using the native email app

So I was stuck trying to send email with ionic. I tried many tutorials, examples but nothing worked except this one: https://www.thepolyglotdeveloper.com/2014/08/send-email-android-ios-ionicframework/.

I'm leaving this tutorial here. Please see below for the answer.

Upvotes: 5

Views: 20476

Answers (2)

CommonSenseCode
CommonSenseCode

Reputation: 25399

Very Easy

  1. Go to your app root directory
  2. Install Email Composer with Attachments Plugin type: cordova plugin add https://github.com/jcjee/email-composer.git, link for repo
  3. Re-build project for your desired platform for example for android: ionic build android

  4. Now prepare your AngularJS controller:

    angular.module('myApp').controller('WhatToDoController', function ($scope, $state) {

var whatToDo = this;

/**
 * Sends an email using Email composer with attachments plugin and using
 * parameter email.
 *
 * @param email
 */
whatToDo.sendEmail = function (email) {
  if (window.plugins && window.plugins.emailComposer) { //check if plugin exists

    window.plugins.emailComposer.showEmailComposerWithCallback(function (result) {
        //console.log("Email sent successfully");
      },

      null,        // Subject
      null,        // Body
      [email],     // To (Email to send)
      null,        // CC
      null,        // BCC
      false,       // isHTML
      null,        // Attachments
      null);       // Attachment Data
  }

}
});

  5. Now in your html view you can use the method sendEmail(email):

    <p>
Send an email to <a href="#" ng-click="whatToDo.sendEmail('[email protected]')">[email protected]</a>
</p>

  6. Try to use this on an actual smartphone since in the emulator if you have no configured email app it won't work properly.

If you get stuck or something try: https://www.youtube.com/watch?v=kFfNTdJXVok or https://blog.nraboy.com/2014/08/send-email-android-ios-ionicframework

Upvotes: 3

bandojulio
bandojulio

Reputation: 129

Here is how I use it in my app.js:

.controller('EmailCtrl', function($cordovaEmailComposer, $scope) {
$cordovaEmailComposer.isAvailable().then(function() {
   // is available
   alert("available");
 }, function () {
   // not available
   alert("not available");
 });
 $scope.sendEmail = function(){
  var email = {
     to: '[email protected]',
     cc: '[email protected]',
     bcc: ['[email protected]', '[email protected]'],
     attachments: [
       'file://img/logo.png',
       'res://icon.png',
       'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...',
       'file://README.pdf'
     ],
     subject: 'Mail subject',
     body: 'How are you? Nice greetings from Leipzig',
     isHtml: true
  };

 $cordovaEmailComposer.open(email).then(null, function () {
   // user cancelled email
  });
 }
});

And here in my index.html:

<button ng-click="sendEmail()" class="button button-icon icon ion-email">
   Send mail
</button>

Upvotes: 3

Related Questions