Lanka Developers Community

    Lanka Developers

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Shop

    Send Emails without a server-side code with Angular

    Front-End Development
    angular web development email javascript feedback
    6
    8
    4246
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Udith Indrakantha
      Udith Indrakantha Web Development last edited by Udith Indrakantha

      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

      1 Reply Last reply Reply Quote 2
      • root
        root Linux Help last edited by

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

        Udith Indrakantha 1 Reply Last reply Reply Quote 2
        • Nubelle
          Nubelle Web Development last edited by

          wow good article

          1 Reply Last reply Reply Quote 1
          • dev_lak
            dev_lak last edited by

            good article bro, thanks

            1 Reply Last reply Reply Quote 1
            • imadusanka
              imadusanka last edited by

              Thank you bro

              1 Reply Last reply Reply Quote 1
              • Pasan Induwara
                Pasan Induwara Web Development last edited by

                Thanks bro very helpful:relaxed:

                1 Reply Last reply Reply Quote 1
                • Udith Indrakantha
                  Udith Indrakantha Web Development @root last edited by

                  @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 1 Reply Last reply Reply Quote 1
                  • root
                    root Linux Help @Udith Indrakantha last edited by

                    @Udith-Indrakantha

                    awesome bro , thank you

                    1 Reply Last reply Reply Quote 1
                    • 1 / 1
                    • First post
                      Last post

                    0
                    Online

                    3.6k
                    Users

                    1.3k
                    Topics

                    5.3k
                    Posts

                    • Privacy
                    • Terms & Conditions
                    • Donate

                    © Copyrights and All right reserved Lanka Developers Community

                    Powered by Axis Technologies (PVT) Ltd

                    Made with in Sri Lanka

                    | |