How can I handle errors with the async pipe in RxJS?

How can I handle errors with the async pipe in RxJS?

You can handle errors in the async pipe by using the catchError operator in your observable.

Can you show me a code example?

Sure! Here's a simple example:

import { Component } from '@angular/core';
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="data$ | async as data; else error">
      {{ data }}
    </div>
    <ng-template #error>
      <p>Error loading data!</p>
    </ng-template>
  `
})
export class ExampleComponent {
  data$ = this.getData().pipe(
    catchError(err => {
      console.error(err);
      return of(null); // Return a fallback value
    })
  );

  getData() {
    // Simulate an API call that may fail
    return of('Data loaded!'); // Replace with actual API call
  }
}

What if I want to show a different error message based on the error type?

You can customize the error handling in the catchError operator. For example:

catchError(err => {
  let errorMessage = 'An unknown error occurred!';
  if (err.status === 404) {
    errorMessage = 'Data not found!';
  } else if (err.status === 500) {
    errorMessage = 'Server error!';
  }
  console.error(err);
  return of(errorMessage);
})