Como enviar correos en Angular haciendo uso de Laravel

Escrito por zEOCk hace hace 2 años

Compartir En redes Sociales

Aprende a enviar correos "Emails" desde el FrontEnd con angular haciendo uso del Backend con Laravel Php, para poder hacer esto posible seguiremos los siguientes pasos, para que la implementación sea verdaderamente sencilla.

Este articulo viene en 2 partes una que es el Frontend con Angular y el otro es el Backend con laravel, En angular nos tocara hacer la conexión y por medio de Laravel enviaremos los Emails.

Recuerda que para enviar correos (Emails) tendremos 2 carpetas en el servidor el FrontEnd (Angular) y el BackEnd (Laravel), esta última no debe estar en la carpeta public.

/FrontEnd
/BAckend

Paso 1 - Añadir los siguientes módulos en Angular.

Nos vamos al app.module.ts y añadimos lo siguiente:

import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

 imports: [
    ReactiveFormsModule,
    HttpClientModule 
  ],

Paso 2 - Creamos el formulario.

En este caso necesitamos tener un formulario en el cual tenemos un botón que al ejecutarse nos envía el dato que ingreso el cliente en la caja de texto.

<form [formGroup]="FormContacto" (ngSubmit)="EnviarEmail()">
  <label>
    Nombre
    <input type="text" formControlName="nombre">
  </label>
  <button type="submit">Submit</button>
</form>

Como podemos ver, cuando presionemos el botomSubmit nos enviara al método EnviarEmail() el cual trabajaremos a continuación para ahí hacer el envió del correo por medio de una api en Laravel.

Paso 3 - Editar el archivo Ts y añadir el metodo EnviarEmail().

Primero que nada hacemos las siguientes importaciones.

import { HttpClient } from '@angular/common/http';
import { FormGroup, FormBuilder } from '@angular/forms';
import { environment } from '../environments/environment';

Y creamos el metodo EnviarEmail() en el que vamos trabajar la lógica para poder enviar el Email haciendo uso del Framewok Laravel.

export class AppComponent {
  FormContacto: any = FormGroup;
  UrlEmail: string = environment.UrlEmail;
  constructor(public fb: FormBuilder, private http: HttpClient) {
    this.FormContacto = this.fb.group({
      nombre: [''],
    });
  }
  EnviarEmail() {
    var formData: any = new FormData();
    formData.append('nombre', this.FormContacto.get('nombre').value);
    this.http
      .post(this.UrlEmail, formData)
      .subscribe(
      (response) => console.log(response),
      (error) => console.log(error));
    }
}

Recuerda crear las variables en el archivo enviroments.ts y enviroments.prod.ts estos dentro de la carpeta enviroments esto con el fin de que tome el valor de la variable mailer dependiendo si estamos en Local o producción.

Así lo dejamos para trabajar de forma local.

export const environment = {
  production: false,
  UrlEmail: 'http://localhost/api/EnviarCorreo'
};

Y así para producción

export const environment = {
  production: true,
  UrlEmail: 'Tudominio/LaravelBAckend'
};

Paso 4 - Creamos la Api en Laravel

Para el siguiente paso nos vamos a este articulo en el que crearemos todo lo necesario para que podamos enviar el email.

https://obedsanchez.com/articulo/frontend-angular-backend-laravel-envia-emails-637eb9fcb37a5

Etiquetas:

Compartir En redes Sociales

Facebook WhatsApp Youtube

Ing. Obed Sánchez

Gusto por las motos Harley Davidson, el rock n roll y la informática, creador de este blog para difusión del conocimiento libre, interesado en el mundo open source.