Angular

Angular (opens new window) is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript. EmailJS works with Angular out of the box.

Below we give an example for the contact form components.

The contact-us.component.ts:

import { Component } from '@angular/core';
import emailjs, { type EmailJSResponseStatus } from '@emailjs/browser';

@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, {
        publicKey: 'YOUR_PUBLIC_KEY',
      })
      .then(
        () => {
          console.log('SUCCESS!');
        },
        (error) => {
          console.log('FAILED...', (error as EmailJSResponseStatus).text);
        },
      );
  }
}

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

If you use FormsModule, then you should use the ngSubmit listener without preventDefault method