Setup Contact in Angular Web App

Setup Contact in Angular Web App

I’m sure everyone likes a comment box in their website, Today I set up a comment box for an Angular project and felt like sharing the process.
It’s easier than it sounds, I set up an email service which helps anyone to contact you through email and sent a response back after they do so.
so without further adieu lets get to it. Here Come the steps 👉

1. Go to Email.js website and make create an account (obviously)
2. Next, select a service, I went with email, If you have any other service in hand be my guest 🌝.
3. Make a template for an email to be sent to you and sent a reply to them (go wild 😜)

4. install the emailjs-com package for the project

   npm install emailjs-com --save

5. go to their docs and get the angular snippet
   

   contact.component.ts

import { Component } from '@angular/core';
import emailjs, { EmailJSResponseStatus } from 'emailjs-com';

@Component({
  selector: 'contact-us',
  templateUrl: './contact-us.component.html',
  styleUrls: ['./contact-us.component.css']
})
export class ContactUsComponent {

  public sendEmail(e: Event) {
    e.preventDefault();
    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID',
     e.target as HTMLFormElement, 'YOUR_USER_ID')
      .then((result: EmailJSResponseStatus) => {
        console.log(result.text);
      }, (error) => {
        console.log(error.text);
      });
  }
}

template

<form class="contact-form" (submit)="sendEmail($event)">
    <label>Name</label>
    <input type="text" name="user_name">
    <label>Email</label>
    <input type="email" name="user_email">
    <label>Message</label>
    <textarea name="message"></textarea>
    <input type="submit" value="Send">
</form>

6. Get your ‘YOURSERVICEID’, ‘YOURTEMPLATEID’,‘YOURUSERID’ from the accounts in emailjs
7. update the emailjs template with the updated variables in the template with username,useremail, message
8. And that’s the end of it.

Happy getting the feedback from visitors 🙋