feat(doc): move catcherrro

apps/rxjs/catch-error/src/app/app.component.css

@@ -0,0 +1,32 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+}
+.form-container {
+  text-align: center;
+}
+input {
+  padding: 8px;
+  margin-right: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+button {
+  padding: 8px 16px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.response {
+  margin-left: 25%;
+  margin-top: 2%;
+  width: 50%;
+  text-align: center;
+  border: 1px solid #ccc;
+}

apps/rxjs/catch-error/src/app/app.component.spec.ts

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/angular';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  test('...', async () => {
+    await render(AppComponent);
+  });
+});

apps/rxjs/catch-error/src/app/app.component.ts

@@ -0,0 +1,59 @@
+import { Component, DestroyRef, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, concatMap, map } from 'rxjs';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  selector: 'app-root',
+  template: `
+    <div class="form-container">
+      <span
+        >possible values: posts, comments, albums, photos, todos, users</span
+      >
+    </div>
+    <form class="form-container" (ngSubmit)="submit$$.next()">
+      <input
+        type="text"
+        placeholder="Enter text"
+        [(ngModel)]="input"
+        name="action" />
+      <button>Fetch</button>
+    </form>
+    <div class="response">
+      {{ response | json }}
+    </div>
+  `,
+  styleUrls: ['./app.component.css'],
+})
+export class AppComponent {
+  submit$$ = new Subject<void>();
+  input = '';
+  response: unknown;
+  private destroyRef = inject(DestroyRef);
+  constructor(private http: HttpClient) {}
+  ngOnInit() {
+    this.submit$$
+      .pipe(
+        map(() => this.input),
+        concatMap((value) =>
+          this.http.get(`https://jsonplaceholder.typicode.com/${value}/1`)
+        ),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe({
+        next: (value) => {
+          console.log(value);
+          this.response = value;
+        },
+        error: (error) => {
+          console.log(error);
+          this.response = error;
+        },
+        complete: () => console.log('done'),
+      });
+  }
+}

apps/rxjs/catch-error/src/app/app.config.ts

@@ -0,0 +1,6 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+  providers: [importProvidersFrom(HttpClientModule)],
+};