Send Emails without a server-side code with Angular

[Udith Indrakantha]

Without any server-side code hosted on a server, you can send emails through your Angular application with smtpJS, a client-side Javascript library.

First you need to download this library and include it into the necessary component of the Angular Application.
Click here to download the library file.
(If any error in download, go to smtpJS.com , where you can directly download or get the CDN link)

Next , put this downloaded js file into the assets folder found in src directory of the project.

Next we have to get the help of an email service provider to send the email. I here use Elastic Email site for this. First go to the Elastic Email site to create an account. Just complete the sign up process, it’s that simple.

After logging into the site, go to Start — → Connect To SMTP API .

Next, you can see a button to create new credentials. Create a new credentials following the simple steps. The system will generate a password for you. Copy that password and save it somewhere before you close that popup model.

Finally you’ll see something like this.

Here, your user name and password (You saved it earlier) can be seen .These details are used to access this.

Coding part

Go to your angular project’s relevant component from which an email must be sent.

1. Import the smtp.js file from assets folder to the component by typing
   import ‘./../../../assets/smtp.js’;             <! — path might change — >
   declare let Email : any;

2. Write the code to send the email with the user-inputs within onSubmit() method as below,

import { Component, OnInit } from '@angular/core';
import { ProfileService } from '../profile.service';
import { Model } from './contact-form';
import { NgForm } from '@angular/forms';
import  './../../../assets/js/smtp.js '; <! — file path may change →
declare let Email: any;

@Component({ selector: ‘app-contact’,
 templateUrl: ‘./contact.component.html’,
 styleUrls: [‘./contact.component.scss’]})

export class ContactComponent implements OnInit {

model: Model = new Model();

constructor( private profile: ProfileService) { }

ngOnInit() {
}

onSubmit(f: NgForm) {

Email.send({
              Host : ‘smtp.elasticemail.com’,
             Username : ‘[email protected]’, 
             Password : ‘**************************’,          //Enter your password here
             To : ‘[email protected]’,
             From : `[email protected]`,
             Subject : this.model.subject,
            Body : `
                   <i>This is sent as a feedback from my resume page.</i> <br/>
                   <b>Name: 
                  </b>${this.model.name} <br />
                   <b>Email: </b>${this.model.email}<br />
                  <b>Subject: 
                  </b>${this.model.subject}<br />
                  <b>Message:</b> <br /> 
                  ${this.model.message} <br> 
                  <br> <b>~End of Message.~</b> `
}).then( 
             message => {alert(message); f.resetForm(); } 
             );
    }
}

Here , within Email.send(….); method, you can give the elastic mail registered email as the username ,
and earlier saved password for the password field.
From: email should be equal to the elastic mail’s registered email and you can set the receiver’s email under To field.

Other fields can be taken from your form created .

That’s it.

Original Post: https://medium.com/@udith.indrakantha/send-emails-without-a-server-side-code-with-angular-e227c3e62dbd

[root]

Good article bro. Can we use SMTP js for ionic ?

[Nubelle]

wow good article

[dev_lak]

good article bro, thanks

[imadusanka]

Thank you bro

[Pasan Induwara]

Thanks bro very helpful:relaxed:

[Udith Indrakantha]

@root Yes bro. we can use it for Ionic also because SMTP js is a javascript code. You just need to add the file and import it to the .ts file if the component. The way to import a js file is simply the same described in this post.

[root]

@Udith-Indrakantha

awesome bro , thank you