Project 20: Pricing Table

Angular Engineer

Builds on these lessons

Component Task

Objective

catchError from RxJS intercepts a failed request inside the pipe, letting you log or recover instead of the error silently killing the subscription.

You're building a pricing table's checkout action.

Task: write a PricingComponent whose subscribe() method POSTs { plan: 'pro' } to /api/subscribe, catching and logging any error instead of letting it propagate.

component.ts

import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, of } from 'rxjs';

@Component({
  selector: 'app-pricing',
  standalone: true,
  template: `<button (click)="subscribe()">Choose Plan</button>`
})
export class PricingComponent {
  private http = inject(HttpClient);

  subscribe() {
    this.http.post('/api/subscribe', { plan: 'pro' })
      .pipe(catchError(err => {
        console.error('Subscription failed', err);
        return of(null);
      }))
      .subscribe();
  }
}

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →