Guided Project 2: Implementing a Custom Debounce Event

// src/app/debounce-input.plugin.ts
import { EventManagerPlugin } from '@angular/platform-browser';
import { Injectable, Inject, NgZone } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { fromEvent, Subscription, debounceTime } from 'rxjs'; // Import RxJS operators

@Injectable()
export class DebounceInputPlugin extends EventManagerPlugin {
  static readonly EVENT_PREFIX = 'debounceInput';
  static readonly DEFAULT_DEBOUNCE_TIME_MS = 400; // Default debounce time

  constructor(
    @Inject(DOCUMENT) doc: any,
    private ngZone: NgZone // Inject NgZone to manage execution context
  ) {
    super(doc);
  }

  /**
   * Checks if this plugin should handle the given event name.
   * We'll support events like 'debounceInput' or 'debounceInput.500'.
   */
  override supports(eventName: string): boolean {
    return eventName.startsWith(DebounceInputPlugin.EVENT_PREFIX);
  }

  /**
   * Adds the event listener with debouncing logic.
   * @param element The DOM element to attach the listener to.
   * @param eventName The full event name (e.g., 'debounceInput.500').
   * @param handler The Angular handler function to execute after debouncing.
   * @returns A cleanup function to unsubscribe from the RxJS stream.
   */
  override addEventListener(
    element: HTMLElement,
    eventName: string,
    handler: Function
  ): Function {
    // 1. Extract the debounce time from the eventName
    const parts = eventName.split('.');
    const customDebounceTime = parts.length > 1 ? parseInt(parts[1], 10) : NaN;
    const debounceTimeMs = isNaN(customDebounceTime) || customDebounceTime < 0
      ? DebounceInputPlugin.DEFAULT_DEBOUNCE_TIME_MS
      : customDebounceTime;

    console.log(`[DebounceInputPlugin] Attaching debounced 'input' event for ${eventName} with delay ${debounceTimeMs}ms`);

    let sub: Subscription;

    // 2. Run event subscription outside Angular's zone for performance
    // This prevents triggering change detection on every native input event during the debounce period.
    this.ngZone.runOutsideAngular(() => {
      sub = fromEvent(element, 'input') // Listen to the native 'input' DOM event
        .pipe(debounceTime(debounceTimeMs)) // Apply the debounceTime operator
        .subscribe((event: Event) => {
          // 3. When debounced event fires, re-enter Angular's zone to run the handler.
          // This ensures that Angular's change detection (if not zoneless) or signal updates
          // are properly picked up.
          this.ngZone.run(() => handler(event));
        });
    });

    // 4. Return a cleanup function to unsubscribe from the RxJS stream
    return () => {
      console.log(`[DebounceInputPlugin] Cleaning up subscription for ${eventName}`);
      sub.unsubscribe();
    };
  }
}

// src/app/app.config.ts (Update existing file)
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideZonelessChangeDetection } from '@angular/core';
import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
import { DebounceInputPlugin } from './debounce-input.plugin'; // Import your plugin

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter(routes),
    // Provide your custom plugin. This adds it to Angular's event manager.
    // Order can matter: plugins provided later are checked first.
    {
      provide: EVENT_MANAGER_PLUGINS,
      useClass: DebounceInputPlugin,
      multi: true
    }
  ]
};

// src/app/debounce-input-demo/debounce-input-demo.component.ts
import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; // Used for potential ngModel (though not for debounceInput)

@Component({
  selector: 'app-debounce-input-demo',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="demo-card">
      <h3>Search Input with Debounce (500ms)</h3>
      <input type="text"
             placeholder="Type to search..."
             (debounceInput.500)="onSearchInput($event)"
             class="search-input">
      <p>Search Term: <strong>{{ searchTerm() }}</strong></p>
      <p>Last Update: {{ lastUpdateTimestamp() | date:'mediumTime' }}</p>

      <hr>

      <h3>Instant Input vs. Debounced Input (1000ms)</h3>
      <div>
        <label for="instantInput">Instant Input:</label>
        <input id="instantInput"
               type="text"
               (input)="onInstantInput($event)"
               placeholder="Instant update">
        <p>Instant Value: {{ instantValue() }}</p>
      </div>

      <div>
        <label for="debouncedInput">Debounced Input (1000ms):</label>
        <input id="debouncedInput"
               type="text"
               (debounceInput.1000)="onDebouncedInputWithDelay($event)"
               placeholder="Debounced update">
        <p>Debounced Value: {{ debouncedValueWithDelay() }}</p>
      </div>

      <hr>

      <h3>Button Click with Debounce (700ms)</h3>
      <button (debounceInput.700)="onDebouncedButtonClick()">
        Submit (Debounced)
      </button>
      <p>Submit Clicks: {{ submitClickCount() }}</p>

      <p class="instruction">
        <em>Type rapidly in the debounced inputs or click the debounced button quickly. Observe the updates delay.</em>
      </p>
    </div>
  `,
  styles: [`
    .demo-card {
      border: 1px solid #ccc;
      padding: 20px;
      margin: 20px;
      border-radius: 8px;
      background-color: #f9f9f9;
    }
    input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 1em;
    }
    .search-input {
      font-size: 1.1em;
    }
    label {
      font-weight: bold;
      margin-right: 10px;
    }
    div > div {
      margin-bottom: 15px;
      padding: 10px;
      border: 1px dashed #eee;
      border-radius: 4px;
    }
    button {
      padding: 10px 15px;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1em;
    }
    button:hover {
      background-color: #218838;
    }
    p {
      margin-top: 5px;
      font-size: 0.95em;
    }
    .instruction {
      font-style: italic;
      color: #666;
      margin-top: 20px;
    }
  `]
})
export class DebounceInputDemoComponent {
  searchTerm = signal('');
  lastUpdateTimestamp = signal<Date | null>(null);

  instantValue = signal('');
  debouncedValueWithDelay = signal('');

  submitClickCount = signal(0);

  onSearchInput(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    this.searchTerm.set(value);
    this.lastUpdateTimestamp.set(new Date());
    console.log(`[onSearchInput] Debounced search term: "${value}"`);
  }

  onInstantInput(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    this.instantValue.set(value);
    // console.log(`[onInstantInput] Instant value: "${value}"`); // Will log very frequently
  }

  onDebouncedInputWithDelay(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    this.debouncedValueWithDelay.set(value);
    console.log(`[onDebouncedInputWithDelay] Debounced value (1000ms): "${value}"`);
  }

  onDebouncedButtonClick() {
    this.submitClickCount.update(count => count + 1);
    console.log(`[onDebouncedButtonClick] Submit button clicked (debounced)! Count: ${this.submitClickCount()}`);
  }
}