title: Sending Email from Angular 2
body: <h1>How Do I Send Email from an Angular 2 App?</h1>
  <p>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.</p>
  <hr />
  <h2>Client Side Progress</h2>
  <p>Here is my form:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- contact-form.component.html --&gt;
  
  &lt;form [formGroup]="formService.contactForm" (ngSubmit)="formService.onSubmitForm()"&gt;
  
    &lt;input type="text" formControlName="userFirstName"&gt;
    &lt;label&gt;First Name&lt;/label&gt;
    
    &lt;input type="text" formControlName="userLastName"&gt;
    &lt;label&gt;Last Name&lt;/label&gt;
  
    &lt;button type="submit"&gt;SUBMIT&lt;/button&gt;
    
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  <hr />
  <p>Here is my contact-form component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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();
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Here is my contact-form service:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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();
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  <p>When I click the submit button, the form data will successfully display in the console.</p>
  <hr />
  <h2>Server-Side Nodejs Progress</h2>
  <p>I can successfully send emails from the command prompt using SendGrid and Nodejs:</p>
  <p>Example: sendmail.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Sendgrid = require('sendgrid')(
    process.env.SENDGRID_API_KEY || '&lt;my-api-key-placed-here&gt;'
  );
  
  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'
      }],
      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);
  });</code></pre>
  </div>
  </div>
  </p>
  <p>And then an email will successfully send if I type this in the command prompt:</p>
  <pre><code>node sendmail
  </code></pre>
  <hr />
  <p>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.</p>
  <p>Any help would be greatly appreciated. Thanks for your time!</p>