Búsqueda de sitios web

typescript - Cómo enviar correo electrónico usando Angular 7

¿Cómo puedo crear un servicio de correo electrónico en Angular 7 que contenga un método para enviar correos electrónicos?

Por ejemplo:

// 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
      ...
    }
}

Soy nuevo en el desarrollo con Angular, así que cualquier ejemplo, caso de uso y/o fragmento de código es muy apreciado.

Respuesta #1

Podrías usar algún proveedor de BaaS (Backend como servicio), como Formspree. Es bastante sencillo de usar y te permite enviar correos electrónicos sin tener que escribir o configurar un backend. Todo lo que tienes que hacer es enviar una solicitud Http desde tu aplicación Angular y este servicio se encarga del resto.

  1. crear una cuenta en formspree.io
  2. haz clic en el botón «+Nuevo Formulario»
  3. introduce un correo electrónico en el que quieras recibir los correos

Entonces obtendrás un endpoint único para este formulario recién creado que puedes usar para enviar (post) correos electrónicos desde tu aplicación Angular. El endpoint se verá algo así: https://formspree.io/asdlf7asdf

Aquí hay un ejemplo de código que usa formularios dirigidos por plantillas:

El formulario html

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

El código detrás

 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);
          }
        );
    }
  }

Puedes hacer mucho más con este (u otros) servicios, pero esto sería la idea básica.

Respuesta #2

Angular funciona del lado del cliente y para enviar correos electrónicos necesitas un servidor, así que creo que por ahora es imposible enviar correos electrónicos usando solo Angular; necesitas usar una aplicación del lado del servidor para enviar correos electrónicos.

Artículos relacionados