The Techies' pub

Angular 4 – Automated mails with attachments

Hope you are all well. In this post we’ll see how to send automated mails from your app using Firebase Cloud Functions and emailjs. We’ll also see how to attach a generated pdf file along with the email using pdfkit.

First of all let’s scaffold out an angular 4 app using the ng-cli tool with the below command.

1

ng new<yourappname>

Once the app is created install firebase and angularfire 2

1

npm install firebase angularfire2--save

Once this is done add firebase app config to your app. You can do this in separate file and import it into your app.module.ts file or simply do it from app.module.ts file as shown below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

import{BrowserModule}from'@angular/platform-browser';

import{NgModule}from'@angular/core';

import{FormsModule}from'@angular/forms';

import{AngularFireModule}from'angularfire2';

import{AngularFireAuth}from'angularfire2/auth';

import{AngularFireDatabase}from'angularfire2/database';

import{AppComponent}from'./app.component';

constconfig={

apiKey:"<yourapikey>",

authDomain:"<yourauthdomain>",

databaseURL:"<yourdatabaseURL>",

projectId:"<yourprojectid>",

storageBucket:"<yourstorageBucket>",

messagingSenderId:"<yourmessagingSenderId>"

};

@NgModule({

declarations:[

AppComponent

],

imports:[

BrowserModule,

FormsModule,

AngularFireModule.initializeApp(config)

],

providers:[

AngularFireAuth,

AngularFireDatabase

],

bootstrap:[AppComponent]

})

exportclassAppModule{}

Now that this is done, let me explain what we are about to do now.

Just to demonstrate this, we’ll be sending an email when a user logs in into our app. This email will be sent by a function running on firebase cloud. This function will generate a pdf and attach it along with the email that we send.

First let’s do the login thing.

Open up app.html and add the below code.

1

2

3

4

5

6

7

8

9

10

11

12

<div style="text-align:center"*ngIf="!loggedin">

<h1>

Login tocontinue

</h1>

<input type="text"[(ngModel)]="email">

<input type="password"[(ngModel)]="password">

<button(click)="login()">Login</button>

</div>

<div *ngIf="loggedin">

<h1>You have logged in</h1>

<h3>Check your email</h3>

</div>

Again, this is just a demo. In a real app never write any code in the app.html page (except the router-outlet tags ofcourse)