added new operators

Author: AnkitSharma-007

README.md

@@ -38,5 +38,3 @@ And more as we grow!
 Have a great example, question, or operator to add? PRs are open! Let’s make this the go-to resource for RxJS interview prep in the Angular world.
 
 ---
-
-Let me know if you want badges, table of contents, or starter files (`CONTRIBUTING.md`, etc.) too!

docs/Operators/Combination/withLatestFrom.md

@@ -0,0 +1,130 @@
+Think of `withLatestFrom()` as an operator that lets one stream (the "source") peek at the most recent value from one or more other streams whenever the source stream emits something.
+
+- **Source Stream:** This is the main Observable you attach `withLatestFrom()` to.
+- **Other Streams:** These are the Observables you pass _into_ `withLatestFrom()`.
+- **How it works:** When the **source** stream emits a value, `withLatestFrom()` looks at the **other** streams and grabs their _latest_ emitted value. It then combines the value from the source stream and the latest values from the other streams into an array.
+- **Important:** It only emits when the **source** stream emits. If the other streams emit values but the source stream hasn't emitted since, `withLatestFrom()` does nothing. Also, it won't emit anything until _all_ the provided streams (source and others) have emitted at least one value.
+
+## Real-World Example: Search with Filters
+
+Imagine you have a search page for products. There's:
+
+1.  A search input field where the user types their query.
+2.  A dropdown menu to select a category filter (e.g., "Electronics", "Clothing", "Home Goods").
+
+You want to make an API call to fetch products whenever the user types in the search box (after a little pause, using `debounceTime`), but you need _both_ the search term _and_ the currently selected category filter to make the correct API request.
+
+- The search term changes frequently. This will be our **source** stream (after debouncing).
+- The category filter changes less often, maybe only when the user explicitly selects a new option. This will be our **other** stream.
+
+We want to trigger the search using the _latest_ filter value _at the moment_ the (debounced) search term is ready. `withLatestFrom()` is perfect for this.
+
+## Code Snippet
+
+Let's see how this looks in an Angular component:
+
+```typescript
+import { Component, inject, DestroyRef, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ReactiveFormsModule, FormControl } from "@angular/forms";
+import {
+  Subject,
+  debounceTime,
+  distinctUntilChanged,
+  withLatestFrom,
+  takeUntilDestroyed,
+  startWith,
+} from "rxjs";
+
+@Component({
+  selector: "app-product-search",
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  template: `
+    <div>
+      <label for="search">Search:</label>
+      <input id="search" type="text" [formControl]="searchTermControl" />
+    </div>
+    <div>
+      <label for="category">Category:</label>
+      <select id="category" [formControl]="categoryFilterControl">
+        <option value="all">All</option>
+        <option value="electronics">Electronics</option>
+        <option value="clothing">Clothing</option>
+        <option value="home">Home Goods</option>
+      </select>
+    </div>
+
+    <div *ngIf="searchResults">
+      Searching for: "{{ searchResults.term }}" in category: "{{
+        searchResults.category
+      }}"
+    </div>
+  `,
+})
+export class ProductSearchComponent implements OnInit {
+  // --- Dependencies ---
+  private destroyRef = inject(DestroyRef); // For automatic unsubscription
+
+  // --- Form Controls ---
+  searchTermControl = new FormControl("");
+  categoryFilterControl = new FormControl("all"); // Default category
+
+  // --- Component State ---
+  searchResults: { term: string; category: string } | null = null;
+
+  ngOnInit(): void {
+    // --- Observables ---
+    // Source: Search term, debounced
+    const searchTerm$ = this.searchTermControl.valueChanges.pipe(
+      debounceTime(400), // Wait for 400ms pause in typing
+      distinctUntilChanged(), // Only emit if the value actually changed
+      startWith(this.searchTermControl.value || "") // Emit initial value immediately
+    );
+
+    // Other: Category filter
+    const categoryFilter$ = this.categoryFilterControl.valueChanges.pipe(
+      startWith(this.categoryFilterControl.value || "all") // Emit initial value immediately
+    );
+
+    // --- Combining with withLatestFrom ---
+    searchTerm$
+      .pipe(
+        withLatestFrom(categoryFilter$), // Combine search term with the LATEST category
+        takeUntilDestroyed(this.destroyRef) // Auto-unsubscribe when component is destroyed
+      )
+      .subscribe(([term, category]) => {
+        // This block runs ONLY when searchTerm$ emits (after debounce)
+        // It gets the emitted 'term' and the 'latest' value from categoryFilter$
+
+        // Ensure we have non-null values (FormControl can emit null)
+        const validTerm = term ?? "";
+        const validCategory = category ?? "all";
+
+        console.log(
+          `API Call Needed: Search for "${validTerm}" with filter "${validCategory}"`
+        );
+
+        // In a real app, you'd call your API service here:
+        // this.productService.search(validTerm, validCategory).subscribe(...)
+
+        // Update component state for display (example)
+        this.searchResults = { term: validTerm, category: validCategory };
+      });
+  }
+}
+```
+
+**Explanation of the Code:**
+
+1.  **`searchTermControl` / `categoryFilterControl`:** We use Angular's `FormControl` to manage the input and select elements.
+2.  **`searchTerm$`:** We get an Observable of the search term's changes using `valueChanges`. We apply:
+    - `debounceTime(400)`: To wait until the user stops typing for 400ms before considering the term stable.
+    - `distinctUntilChanged()`: To avoid triggering searches if the debounced term is the same as the last one.
+    - `startWith()`: To ensure the stream has an initial value so `withLatestFrom` can emit right away if the category also has a value. This makes the initial state work correctly.
+3.  **`categoryFilter$`:** We get an Observable of the category changes using `valueChanges`. We also use `startWith()` here for the initial value.
+4.  **`withLatestFrom(categoryFilter$)`:** We pipe the `searchTerm$` (our source). When `searchTerm$` emits a value (after debouncing), `withLatestFrom` looks at `categoryFilter$` and gets its _most recently emitted value_.
+5.  **`subscribe(([term, category]) => ...)`:** The result is an array `[sourceValue, latestOtherValue]`. We destructure this into `term` and `category`. This callback function is executed _only_ when the debounced search term changes. Inside, we have exactly what we need: the current search term and the _latest_ selected category at that moment.
+6.  **`takeUntilDestroyed(this.destroyRef)`:** This is the modern Angular way to handle unsubscriptions. When the `ProductSearchComponent` is destroyed, this operator automatically completes the Observable stream, preventing memory leaks without manual cleanup.
+
+So, `withLatestFrom()` is incredibly useful when an action (like searching) depends on the latest state of other configuration or filter inputs at the exact moment the action is triggered.

docs/Operators/Combination/zip.md

@@ -0,0 +1,119 @@
+The `zip()` operator in RxJS is a **combination operator**. Its job is to combine multiple source Observables by waiting for each observable to emit a value at the **same index**, and then it emits an array containing those values paired together.
+
+## Analogy: The Zipper
+
+Think of a clothing zipper. It has two sides (or more, if you imagine a multi-way zipper!). To close the zipper, teeth from _both_ sides must align at the same position. `zip()` works the same way:
+
+1.  It subscribes to all the source Observables you provide.
+2.  It waits until the **first** value arrives from **every** source. It then emits these first values together in an array: `[firstValueA, firstValueB, ...]`.
+3.  Then, it waits until the **second** value arrives from **every** source. It emits these second values together: `[secondValueA, secondValueB, ...]`.
+4.  It continues this process, index by index (0, 1, 2,...).
+5.  **Crucially:** If one source Observable completes _before_ another, `zip()` will stop emitting new pairs as soon as it runs out of values from the shorter source to pair with. It needs a value from _all_ sources for a given index to emit.
+
+## Why Use `zip()`?
+
+You use `zip()` when you have multiple streams and you need to combine their values based on their **emission order or index**. You specifically want the 1st item from stream A paired with the 1st from stream B, the 2nd with the 2nd, and so on.
+
+## Real-World Example: Pairing Related Sequential Data
+
+Imagine you have two real-time data feeds:
+
+1.  `sensorA$` emits temperature readings every second.
+2.  `sensorB$` emits humidity readings every second, perfectly synchronized with sensor A.
+
+You want to process these readings as pairs (temperature and humidity for the _same_ timestamp/interval). `zip` is perfect for this.
+
+Another scenario (less common for APIs, more for UI events or other streams): Suppose you want to pair every user click with a corresponding item from another list that gets populated sequentially. The first click pairs with the first item, the second click with the second, etc.
+
+## Code Snippet Example
+
+Let's create a simple Angular component example using `zip`. We'll zip together values from two simple streams: one emitting letters ('A', 'B', 'C') quickly, and another emitting numbers (10, 20, 30, 40) more slowly.
+
+```typescript
+import { Component, DestroyRef, inject, OnInit, signal } from "@angular/core";
+import { zip, interval, of } from "rxjs";
+import { map, take } from "rxjs/operators";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+
+@Component({
+  selector: "app-zip-example",
+  standalone: true,
+  template: `
+    <h2>RxJS zip() Example</h2>
+    <p>Combining letters and numbers based on index:</p>
+    <ul>
+      <li *ngFor="let pair of zippedResult()">{{ pair | json }}</li>
+    </ul>
+    <p>
+      Note: The number stream had '40', but the letter stream completed after
+      'C', so zip stopped.
+    </p>
+  `,
+  styles: [
+    `
+      li {
+        font-family: monospace;
+      }
+    `,
+  ],
+})
+export class ZipExampleComponent implements OnInit {
+  private destroyRef = inject(DestroyRef);
+
+  zippedResult = signal<Array<[string, number]>>([]); // Signal to hold the result
+
+  ngOnInit() {
+    // Source 1: Emits 'A', 'B', 'C' one after another immediately
+    const letters$ = of("A", "B", "C");
+
+    // Source 2: Emits 10, 20, 30, 40 every 500ms
+    const numbers$ = interval(500).pipe(
+      map((i) => (i + 1) * 10), // Map index 0, 1, 2, 3 to 10, 20, 30, 40
+      take(4) // Only take the first 4 values
+    );
+
+    // Zip them together
+    zip(letters$, numbers$)
+      .pipe(
+        // zip emits arrays like [string, number]
+        takeUntilDestroyed(this.destroyRef) // Auto-unsubscribe
+      )
+      .subscribe({
+        next: (value) => {
+          // Update the signal with the latest pair
+          // NOTE: For signals, it's often better to collect all results
+          // if the stream completes quickly, or update progressively.
+          // Here we'll just append for demonstration.
+          this.zippedResult.update((current) => [...current, value]);
+          console.log("Zipped value:", value);
+        },
+        complete: () => {
+          console.log("Zip completed because the letters$ stream finished.");
+        },
+        error: (err) => {
+          console.error("Zip error:", err);
+        },
+      });
+  }
+}
+```
+
+**Explanation of the Code:**
+
+1.  `letters$` emits 'A', 'B', 'C' and then completes.
+2.  `numbers$` starts emitting 10 (at 500ms), 20 (at 1000ms), 30 (at 1500ms), 40 (at 2000ms).
+3.  `zip` waits:
+    - It gets 'A' immediately, but waits for `numbers$` to emit.
+    - At 500ms, `numbers$` emits 10. `zip` now has the first value from both ('A', 10) -> Emits `['A', 10]`.
+    - It gets 'B' immediately, waits for `numbers$`.
+    - At 1000ms, `numbers$` emits 20. `zip` has the second value from both ('B', 20) -> Emits `['B', 20]`.
+    - It gets 'C' immediately, waits for `numbers$`.
+    - At 1500ms, `numbers$` emits 30. `zip` has the third value from both ('C', 30) -> Emits `['C', 30]`.
+4.  `letters$` has now completed. Even though `numbers$` emits 40 at 2000ms, `zip` cannot find a corresponding 4th value from `letters$`, so it stops and completes.
+
+## `zip()` vs. Other Combination Operators
+
+- **`combineLatest`**: Emits an array of the _latest_ values from each source whenever _any_ source emits. Doesn't care about index, just the most recent value from all participants.
+- **`forkJoin`**: Waits for _all_ source observables to _complete_, then emits a single array containing the _last_ value emitted by each source. Useful for running parallel one-off tasks (like multiple HTTP requests) and getting all results together at the end.
+
+Use `zip()` specifically when the _order_ and _pairing_ by index (1st with 1st, 2nd with 2nd, etc.) is what you need.