How to send an Email using Angular, Sails.js, and Mailgun

Kseniya Lifanova
Jul 21, 2017 · 5 min read

I recently spent quite some time scouring the internet for a tutorial on how to send an email from the Mailgun service using Angular2 as my front-end and Sails.js as the back-end. I found this great tutorial that uses the sails-hook-email package, but since I was using Angular2, I needed a few more steps. Most of the Mailgun tutorials I found show you how to use Express.js , and because I am new to Sails, I struggled a bit. But alas, a solution was found! And today I would like to share it with you.

This article is going to take you through the steps of:

A few disclaimers:

  • As I am working on this project locally at the time, I am using a sandbox domain with Mailgun. In order to test that an email is being sent, you will need to add a verified email address to your Mailgun account and use that email address in your form. If you are not using the sandbox domain, you will have to configure DNS records and verify the domain.
  • This tutorial assumes you have set up your Angular2 app and your Sails app.


  1. Take note of your Secret API Key, Sandbox Domain, Default SMTP Login, and Default Password (you will use them in your configurations in your Sails app).
  2. Add an email address to the Authorized Recipients so you are able to test the Mailgun service without adding your credit card information or buying a custom domain.


npm install mailgun.js --save

2. Install the sails-hook-email package

npm install sails-hook-email  --save

3. Create a model.js file and controller.js file using the sails generate api command. Name it email.

sails generate api email

4. In your email.js model file, structure the model similar to the object sent from the client side (we will do this in the Angular2 section).

5. In your EmailController.js file, use the, data, options, cb) function to send your email.

The first argument in the, data, options, cb)function is the name of the view template we are going to use. We will need to create that template file in the views folder. The view templates path defaults to views/emailTemplates. Please follow the following path structure when creating your view:


6. In your sails config folder, create a file called email.js. This is where you will set your Mailgun configurations, using your Default SMTP Login and Default Password. Remember to set testMode to false, otherwise your email is sent to a .txt file rather than actually being sent.

7. In your models.js file in the config folder, set migrate to ‘alter’. This setting controls the auto-migration strategy when you run your Sails app. ‘Alter’ will try to keep your data but will make changes to your tables if you do so in your models.

migrate: 'alter'

8. In your cors.js file in the config folder, set AllRoutes to true, and origin to ‘*’. CORS is a mechanism that allows browser scripts on pages served from other domains to talk to your server. By default, CORS is disabled in Sails. These settings will allow your Angular app to interact with your API.

allRoutes: true,origin: '*',


2. In your form.component.ts file, add your onSubmit() function and pass it your three arguments. In this function, you will be calling yourEmailService (which we will create in step #3) and sending it the values from your form.

3. Create your email service which makes the http call to the Mailgun service. Remember you can use the ng generate command to quickly set up and a service.

ng generate service email

3a. Go back to your form.component.ts file to import your EmailService and add it to your constructor function.

import { EmailService } from '../email.service';......constructor(
private _emailService: EmailService
) {}

3b. Provide the service in the providers property in your app.module.ts file. With this in place, we are able to use the EmailService in all components belonging to our AppModule.

providers: [

6. In your email.service.ts file, add the following code:

The sendEmail() function will send the data from your form to the email API you created in your sails app. From there, Sails will use your Mailgun credentials to send the information to the Mailgun service, which in turn sends your template email. If you followed all of these steps, you should see an email in the verified email account that you added to Mailgun.

That’s it. Hope this was helpful.

Need Help with Angular, Sails.js or Mailgun? Contact us!

☞ Related articles you might enjoy:

Upstate Interactive

We're a women-owned business that helps B2B organizations…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store