Mastering Angular: A Complete Guide to Modern Web Development

Chapter 6: Forms, HTTP, and API Integration

Angular offers robust tools for building forms and integrating with APIs. This chapter delves into:

• Forms: Template-driven and Reactive approaches.
• HTTP Client: Making HTTP requests using Angular's HttpClient.
• API Integration: Connecting Angular applications to backend services.

1. Angular Forms Overview

Angular provides two primary approaches to handling forms:

2. Template-driven Forms

Template-driven forms are suitable for simple scenarios and rely heavily on Angular's directives.

Setting Up

1. Import FormsModule:

typescript

import { FormsModule } from '@angular/forms';

2. Add to NgModule imports:

typescript

@NgModule({

  imports: [FormsModule]

})

Creating a Form

html

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">

  <label for="name">Name:</label>

  <input id="name" name="name" ngModel required>

  <label for="email">Email:</label>

  <input id="email" name="email" ngModel email>

  <button type="submit">Submit</button>

</form>

Handling Submission

typescript

onSubmit(form: NgForm) {

  console.log(form.value);

}

3. Reactive Forms

Reactive forms provide more control and are suitable for complex scenarios.

Setting Up

1. Import ReactiveFormsModule:

typescript

import { ReactiveFormsModule } from '@angular/forms';

2. Add to NgModule imports:

typescript

@NgModule({

  imports: [ReactiveFormsModule]

})

Creating a Form

typescript

import { FormGroup, FormControl, Validators } from '@angular/forms';

userForm = new FormGroup({

  name: new FormControl('', Validators.required),

  email: new FormControl('', [Validators.required, Validators.email])

});

Template

html

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">

  <label for="name">Name:</label>

  <input id="name" formControlName="name">

  <label for="email">Email:</label>

  <input id="email" formControlName="email">

  <button type="submit">Submit</button>

</form>

Handling Submission

typescript

onSubmit() {

  console.log(this.userForm.value);

}

4. Form Validation

Angular provides built-in validators and allows custom validators.

Built-in Validators

Custom Validator Example

typescript

function forbiddenNameValidator(control: FormControl): ValidationErrors | null {

  const forbidden = /admin/.test(control.value);

  return forbidden ? { forbiddenName: { value: control.value } } : null;

}

5. Angular HTTP Client

Angular's HttpClient allows communication with backend services.

Setting Up

1. Import HttpClientModule:

typescript

import { HttpClientModule } from '@angular/common/http';

2. Add to NgModule imports:

typescript

@NgModule({

  imports: [HttpClientModule]

})

Making HTTP Requests

typescript

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getData() {

  this.http.get('https://api.example.com/data')

    .subscribe(response => console.log(response));

}

6. API Integration

Integrating Angular with APIs involves creating services to handle HTTP requests.

Creating a Service

bash

ng generate service data

Service Implementation

typescript

import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })

export class DataService {

  constructor(private http: HttpClient) {}

  fetchData() {

    return this.http.get('https://api.example.com/data');

  }

}

Using the Service in a Component

typescript

constructor(private dataService: DataService) {}

ngOnInit() {

  this.dataService.fetchData()

    .subscribe(data => this.data = data);

}

7. Handling HTTP Errors

Use RxJS's catchError operator to handle errors.

typescript

import { catchError } from 'rxjs/operators';

import { throwError } from 'rxjs';

this.http.get('https://api.example.com/data')

  .pipe(

    catchError(error => {

      console.error('Error:', error);

      return throwError(() => new Error('Something went wrong'));

    })

  )

  .subscribe();

8. HTTP Interceptors

Interceptors can modify requests or responses globally.

Creating an Interceptor

typescript

import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()

export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {

    const cloned = req.clone({

      headers: req.headers.set('Authorization', 'Bearer token')

    });

    return next.handle(cloned);

  }

}

Providing the Interceptor

typescript

providers: [

  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }

]

9. Displaying API Data in Templates

Use Angular's *ngFor directive to display lists.

html

<ul>

  <li *ngFor="let item of data">

    {{ item.name }}

  </li>

</ul>

10. Summary