Send Emails without a server-side code with Angular


  • Web Development

    alt text
    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 .

    alt text

    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.

    alt text

    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


  • Linux Help

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


  • Web Development

    wow good article



  • good article bro, thanks



  • Thank you bro


  • Web Development

    Thanks bro very helpful☺


  • Web Development

    @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.


  • Linux Help

    @Udith-Indrakantha

    awesome bro , thank you