> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pipedform.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular

Build a basic contact form in Angular that submits directly to PipedForm using `HttpClient`, with component state for handling submission status.

## Basic Example

<CodeGroup>
  ```typescript TypeScript theme={null}
  import { Component } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { FormsModule } from '@angular/forms';
  import { CommonModule } from '@angular/common';

  @Component({
    selector: 'app-contact-form',
    standalone: true,
    imports: [FormsModule, CommonModule],
    templateUrl: './contact-form.component.html',
  })
  export class ContactFormComponent {
    status: 'idle' | 'loading' | 'success' | 'error' = 'idle';
    message = '';

    name = '';
    email = '';
    formMessage = '';

    constructor(private http: HttpClient) {}

    onSubmit() {
      this.status = 'loading';

      this.http
        .post('https://pipedform.com/f/{form_id}', {
          name: this.name,
          email: this.email,
          message: this.formMessage,
        }, {
          headers: {
  	    'Content-Type': 'application/json',
            Accept: 'application/json',
          },
        })
        .subscribe({
          next: () => {
            this.status = 'success';
            this.message = 'Form submitted successfully';
          },
          error: (err) => {
            this.status = 'error';
            this.message = err?.error?.message ?? 'Something went wrong. Please try again.';
          },
        });
    }
  }
  ```

  ```angular-html HTML theme={null}
  <form (ngSubmit)="onSubmit()">
    <input name="name" [(ngModel)]="name" placeholder="John" required />
    <input
      type="email"
      name="email"
      [(ngModel)]="email"
      placeholder="john@example.com"
      required
    />
    <textarea
      name="message"
      [(ngModel)]="formMessage"
      placeholder="Enter your message..."
      required
    ></textarea>

    <p *ngIf="status === 'error'" style="color: red">{{ message }}</p>
    <p *ngIf="status === 'success'" style="color: green">{{ message }}</p>

    <button type="submit">
      {{ status === 'loading' ? 'Loading...' : 'Send' }}
    </button>
  </form>
  ```
</CodeGroup>