Sending Email from Angular 2

How Do I Send Email from an Angular 2 App?

I am hosting an Angular 2 app on firebase. I want to send a contact form as an email. Ideally my solution would use Nodejs, but I am willing to use anything that will get the job done properly. Below is a breakdown of my app.

---

Client Side Progress

Here is my form:

<!-- contact-form.component.html -->

<form novalidate [formGroup]="formService.contactForm" (ngSubmit)="formService.onSubmitForm()">

  <input type="text" formControlName="userFirstName">
  <label>First Name</label>
  
  <input type="text" formControlName="userLastName">
  <label>Last Name</label>

  <button type="submit">SUBMIT</button>
  
</form>

Here is my contact-form component:

// contact-form.component.ts
import { Component } from '@angular/core';

import { ContactFormService } from './contact-form.service';

@Component({
  selector: 'contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-content.component.css'],
  providers: [ContactFormService]
})
export class ContactFormComponent {

  constructor(private formService: ContactFormService) {
    formService.buildForm();
  }

}

Here is my contact-form service:

// contact-form.service.ts

import { Injectable } from '@angular/core';

import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';


@Injectable()
export class ContactFormService {

  constructor(public formBuilder: FormBuilder) { }

  contactForm: FormGroup;
  formSubmitted: boolean = false;


  buildForm() {
    this.contactForm = this.formBuilder.group({
      userFirstName: this.formBuilder.control(null, Validators.required),
      userLastName: this.formBuilder.control(null, Validators.required)
    });
  }

  onSubmitForm() {
    console.log(this.contactForm.value);
    this.formSubmitted = true;
    this.contactForm.reset();
  }

}

When I click the submit button, the form data will successfully display in the console.

---

Server-Side Nodejs Progress

I can successfully send emails from the command prompt using SendGrid and Nodejs:

Example: sendmail.js

var Sendgrid = require('sendgrid')(
  process.env.SENDGRID_API_KEY || '<my-api-key-placed-here>'
);

var request = Sendgrid.emptyRequest({
  method: 'POST',
  path: '/v3/mail/send',
  body: {
    personalizations: [{
      to: [{ email: 'my.email@gmail.com' }],
      subject: 'Sendgrid test email from Node.js on Google Cloud Platform'
    }],
    from: { email: 'noreply@email-app.firebaseapp.com' },
    content: [{
      type: 'text/plain',
      value: 'Hello Joe! Can you hear me Joe?.'
    }]
  }
});

Sendgrid.API(request, function (error, response) {
  if (error) {
    console.log('Mail not sent; see error message below.');
  } else {
    console.log('Mail sent successfully!');
  }
  console.log(response);
});

And then an email will successfully send if I type this in the command prompt:

node sendmail

---

However, I cannot figure out how to link my submitted form data to sendmail.js and also I cannot figure out how to activate the code in sendmail.js by clicking the submit button.

Any help would be greatly appreciated. Thanks for your time!

via Ty Sabs