refactor: use form, and update readme

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.ts

@@ -1,11 +1,13 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, DestroyRef, inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable, Subscription, concatMap, fromEvent, map } from 'rxjs';
 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],
+  imports: [CommonModule, FormsModule],
   selector: 'app-root',
   template: `
     <div class="form-container">
@@ -13,62 +15,31 @@ import { CommonModule } from '@angular/common';
         >possible values: posts, comments, albums, photos, todos, users</span
       >
     </div>
-    <div class="form-container">
+    <form class="form-container" (ngSubmit)="submit$$.next()">
-      <input #inputRef type="text" placeholder="Enter text" />
+      <input
-      <button #buttonRef>Fetch</button>
+        type="text"
-    </div>
+        placeholder="Enter text"
+        [(ngModel)]="input"
+        name="action" />
+      <button>Fetch</button>
+    </form>
     <div class="response">
       {{ response | json }}
     </div>
   `,
-  styles: [
+  styleUrls: ['./app.component.css'],
-    `
-      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;
-      }
-    `,
-  ],
 })
 export class AppComponent {
-  @ViewChild('buttonRef', { static: true }) buttonRef!: ElementRef;
+  submit$$ = new Subject<void>();
-  @ViewChild('inputRef', { static: true }) inputRef!: ElementRef;
+  input = '';
   response: unknown;
+  private destroyRef = inject(DestroyRef);
   constructor(private http: HttpClient) {}
-
   ngOnInit() {
-    const buttonClick$ = fromEvent(this.buttonRef.nativeElement, 'click');
+    this.submit$$
-    buttonClick$
       .pipe(
-        map(() => this.inputRef.nativeElement.value),
+        takeUntilDestroyed(this.destroyRef),
+        map(() => this.input),
         concatMap((value) =>
           this.http.get(`https://jsonplaceholder.typicode.com/${value}/1`)
         )

docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md

@@ -1,6 +1,6 @@
 ---
 title: 🟢 catchError
-description: Challenge 38 is about learning error handling with catchError rxjs operator
+description: Challenge 38 is about learning obervable completion.
 sidebar:
   order: 14
   badge: New
@@ -8,18 +8,23 @@ sidebar:
 
 <div class="chip">Challenge #38</div>
 
-## Information
+## How to Use the Application
 
-In this application, we will learn the correct placement of a catchError operator. If wrongly placed, the overall subscription will get completed. And we will not be able to send more requests. Aim is to preserve overall subscription, by taking care of error notification from inner observables.
+Our application features a form with a text input box and a "Fetch" button. Upon clicking the "Fetch" button, data is retrieved from a [free API](https://jsonplaceholder.typicode.com/){:target="\_blank"}.
-Possible correct values for which we should get a success response are posts, comments, albums, photos, todos, users
 
-## Statement
+The correct values for a successful response are limited to: posts, comments, albums, photos, todos, and users. Any other values will result in an error response.
 
-Handle the error without completion of the subscription.
+## Bug
+
+A bug has been identified in our application. Users are only able to successfully fetch data until an invalid request is sent. Once an error response is received, users are unable to send additional requests.
+
+## Learnings
+
+This application provides an opportunity to understand the correct placement of a `catchError` operator. If placed incorrectly, the overall subscription will be completed, preventing users from sending more requests. The goal is to preserve the overall subscription by handling error notifications from inner observables appropriately.
 
 ## Constraints
 
-Users should be able to console log value/error each time clicks on the fetch button.
+Users should be able to log the value/error each time they click the "Fetch" button.
 
 :::note
 Start the project by running: `npx nx serve rxjs-catch-error`.