Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to send email using Angular 7 [closed]

How do I create an email service in Angular 7 that contains a method for sending out emails?

For example:

// email.service.ts
import { Injectable } from ‘@angular/core’;

@Injectable()

export class EmailService {

    constructor() { }

    // method to fetch data from server
    public sendEmail(): void {
       // logic to send email
      ...
    }
}

I'm new to developing with Angular so any examples, use cases, and/or code snippets are greatly appreciated.

like image 469
Mokka soru Avatar asked Feb 24 '19 07:02

Mokka soru


2 Answers

You could use some BaaS (Backend as a service) provider, like Formspree. It's pretty simple to use and enables you to send emails without have to write or setup a backend. All you have to do is post an Http request from your angular application and this service takes care of the rest.

  1. create an account at formspree.io
  2. click the "+New Form" button
  3. enter a email that you want to receive the emails

Then you'll get an unique endpoint for this newly create form wich you can use to send (post) emails to from your angular application. The endpoint will look something like this : https://formspree.io/asdlf7asdf

Here is some example code using Template driven forms:

The html form

<form (ngSubmit)="onSubmit(contactForm)" #contactForm="ngForm">
    <input type="text" placeholder="Name" name="name" ngModel required #name="ngModel">
    <input type="text" placeholder="Email" email name="email" ngModel required #email="ngModel">
    <textarea placeholder="Messages" name="messages" ngModel required #messages="ngModel"></textarea>
    <input type="submit" value="Send">
</form>

The code behind

 onSubmit(contactForm: NgForm) {
    if (contactForm.valid) {
      const email = contactForm.value;
      const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
      this.http.post('https://formspree.io/asdlf7asdf',
        { name: email.name, replyto: email.email, message: email.messages },
        { 'headers': headers }).subscribe(
          response => {
            console.log(response);
          }
        );
    }
  }

You can do much more with this (or other) services but this would be the basic gist of it.

like image 138
Davíð Már Gunnarsson Avatar answered Sep 22 '22 08:09

Davíð Már Gunnarsson


Angular working at client side and for sending email you need a server, so I think it is impossible for now to send email using only angular you need to used server side application for sending email.

like image 27
Dhaval Avatar answered Sep 22 '22 08:09

Dhaval