Module Recap

Module 06 covered the two features that make Angular apps dynamic: reactive forms for structured user input, and HttpClient for typed HTTP communication. You also learned the core RxJS operators that make these work together gracefully.

What you learned

Reactive forms define structure in the class. FormBuilder.group() creates FormGroup and FormControl instances. [formGroup] and formControlName connect them to the template. The form’s valueChanges Observable emits whenever any control changes.

Validators add constraints. Pass them as the second element in the control tuple. Check control.invalid, control.touched, and control.hasError('name') in the template to display contextual error messages.

HttpClient makes typed HTTP requests. http.get<T>(url, options) returns an Observable<T>. Subscribe to trigger the request. Use .pipe(map(res => res.results)) to transform responses before subscribers see them.

catchError handles failures gracefully. Return of([]) or another Observable to give subscribers a fallback value instead of propagating the error.

switchMap cancels in-flight requests. Essential for search: when a new query arrives, the old request is abandoned and a fresh one starts.

debounceTime and distinctUntilChanged prevent waste. Debounce delays emission until the user pauses; distinctUntilChanged skips when nothing has changed. Together they reduce unnecessary API calls.

CinemaVault’s Browse page pipeline

this.filterForm.valueChanges.pipe(
  debounceTime(400),
  distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
  switchMap(values => {
    this.loading = true;
    return this.movieService.discover(
      values.genre ?? '',
      values.year ?? '',
      values.sortBy ?? 'popularity.desc'
    ).pipe(catchError(() => of([])));
  })
).subscribe(movies => {
  this.movies = movies;
  this.loading = false;
});

Five operators, each serving a specific role. The result: instant UI feedback without API spam.

Key terms

Term	What it means
FormBuilder	Service that creates FormGroup and FormControl instances
FormGroup	A collection of controls treated as a unit
FormControl	A single form field with value and validation state
valueChanges	Observable on a form or control that emits when the value changes
HttpClient	Angular’s HTTP service — methods return typed Observables
provideHttpClient()	Registers HttpClient with the DI system
map	Transforms each emitted value
catchError	Intercepts errors and returns a recovery Observable
switchMap	Creates a new inner Observable per emission; cancels the previous
debounceTime(ms)	Delays emission until ms ms of silence
distinctUntilChanged	Skips emissions when the value matches the previous
EMPTY	Observable that completes immediately without emitting

What is next

Module 07 — CinemaVault Project Build →

Module 07 brings everything together. You will scaffold the CinemaVault app from scratch, build each feature step by step — MovieService, MovieCard, Browse, search, MovieDetail, WatchlistService, and the route guard — and deploy the finished app to GitHub Pages.