Angular Integration Guide

# Install Angular CLI
npm install -g @angular/cli

# Create new app
ng new my-staticbox-app
cd my-staticbox-app

# Start development server
ng serve

// src/app/services/contact.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ContactService {
  private apiUrl = 'https://staticbox.io/api/forms/[your-project-id]/[slug-name]/submit';

  constructor(private http: HttpClient) {}

  submitContactForm(formData: FormData): Observable<any> {
    return this.http.post(this.apiUrl, formData);
  }
}

// src/app/components/contact-form/contact-form.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ContactService } from '../../services/contact.service';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent {
  contactForm: FormGroup;
  isSubmitting = false;
  isSubmitted = false;
  errorMessage = '';

  constructor(
    private formBuilder: FormBuilder,
    private contactService: ContactService
  ) {
    this.contactForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.minLength(2)]],
      email: ['', [Validators.required, Validators.email]],
      message: ['', [Validators.required, Validators.minLength(10)]]
    });
  }

  onSubmit() {
    if (this.contactForm.valid) {
      this.isSubmitting = true;
      this.errorMessage = '';
      
      const formData = new FormData();
      Object.keys(this.contactForm.value).forEach(key => {
        formData.append(key, this.contactForm.value[key]);
      });

      this.contactService.submitContactForm(formData).subscribe({
        next: (response) => {
          this.isSubmitted = true;
          this.isSubmitting = false;
          this.contactForm.reset();
        },
        error: (error) => {
          this.errorMessage = 'Error sending message. Please try again.';
          this.isSubmitting = false;
        }
      });
    }
  }

  get name() { return this.contactForm.get('name'); }
  get email() { return this.contactForm.get('email'); }
  get message() { return this.contactForm.get('message'); }
}

<!-- src/app/components/contact-form/contact-form.component.html -->
<div class="contact-form-container">
  <div *ngIf="isSubmitted" class="success-message">
    <h3>Thank you!</h3>
    <p>Your message has been sent successfully.</p>
  </div>
  
  <form *ngIf="!isSubmitted" [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate>
    <div class="form-group">
      <label for="name">Name *</label>
      <input type="text" id="name" formControlName="name" class="form-control"
             [class.is-invalid]="name?.invalid && name?.touched">
      <div *ngIf="name?.invalid && name?.touched" class="invalid-feedback">
        <div *ngIf="name?.errors?.['required']">Name is required</div>
        <div *ngIf="name?.errors?.['minlength']">Name must be at least 2 characters</div>
      </div>
    </div>

    <div class="form-group">
      <label for="email">Email *</label>
      <input type="email" id="email" formControlName="email" class="form-control"
             [class.is-invalid]="email?.invalid && email?.touched">
      <div *ngIf="email?.invalid && email?.touched" class="invalid-feedback">
        <div *ngIf="email?.errors?.['required']">Email is required</div>
        <div *ngIf="email?.errors?.['email']">Please enter a valid email</div>
      </div>
    </div>

    <div class="form-group">
      <label for="message">Message *</label>
      <textarea id="message" formControlName="message" class="form-control" rows="5"
                [class.is-invalid]="message?.invalid && message?.touched"></textarea>
      <div *ngIf="message?.invalid && message?.touched" class="invalid-feedback">
        <div *ngIf="message?.errors?.['required']">Message is required</div>
        <div *ngIf="message?.errors?.['minlength']">Message must be at least 10 characters</div>
      </div>
    </div>

    <button type="submit" class="btn btn-primary" [disabled]="contactForm.invalid || isSubmitting">
      {{ isSubmitting ? 'Sending...' : 'Send Message' }}
    </button>

    <div *ngIf="errorMessage" class="error-message">
      {{ errorMessage }}
    </div>
  </form>
</div>

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { ContactFormComponent } from './components/contact-form/contact-form.component';

@NgModule({
  declarations: [
    AppComponent,
    ContactFormComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

# Install Angular Material
ng add @angular/material

// contact-form.component.html with Material components
<mat-card class="contact-form-card">
  <mat-card-header>
    <mat-card-title>Contact Us</mat-card-title>
  </mat-card-header>
  
  <mat-card-content>
    <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
      <mat-form-field appearance="fill" class="full-width">
        <mat-label>Name</mat-label>
        <input matInput formControlName="name" required>
        <mat-error *ngIf="name?.hasError('required')">Name is required</mat-error>
      </mat-form-field>

      <mat-form-field appearance="fill" class="full-width">
        <mat-label>Email</mat-label>
        <input matInput type="email" formControlName="email" required>
        <mat-error *ngIf="email?.hasError('required')">Email is required</mat-error>
        <mat-error *ngIf="email?.hasError('email')">Please enter a valid email</mat-error>
      </mat-form-field>

      <mat-form-field appearance="fill" class="full-width">
        <mat-label>Message</mat-label>
        <textarea matInput formControlName="message" rows="4" required></textarea>
        <mat-error *ngIf="message?.hasError('required')">Message is required</mat-error>
      </mat-form-field>

      <button mat-raised-button color="primary" type="submit" 
              [disabled]="contactForm.invalid || isSubmitting">
        {{ isSubmitting ? 'Sending...' : 'Send Message' }}
      </button>
    </form>
  </mat-card-content>
</mat-card>