Fix INP in Angular

import {
  Component, ChangeDetectionStrategy,
  input, signal, computed, inject
} from '@angular/core';
import { ProductService } from './product.service';

@Component({
  selector: 'app-product-grid',
  standalone: true,
  // Opt in once -- signals handle invalidation automatically
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <input [value]="query()" (input)="query.set($any($event.target).value)"
           placeholder="Search products" />
    <ul>
      @for (p of filteredProducts(); track p.id) {
        <li>{{ p.name }} -- {{ p.price | currency }}</li>
      }
    </ul>
  `,
})
export class ProductGridComponent {
  private svc = inject(ProductService);

  // Input signals trigger re-render only on new reference
  category = input.required<string>();

  // Local signals -- updating them marks this view for check
  query = signal('');

  filteredProducts = computed(() =>
    this.svc.products()
      .filter(p => p.category === this.category())
      .filter(p => p.name.toLowerCase().includes(this.query().toLowerCase()))
  );
}

import {
  Component, OnInit, OnDestroy,
  NgZone, ChangeDetectorRef, inject, signal
} from '@angular/core';

@Component({
  selector: 'app-scroll-tracker',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>Scroll position: {{ scrollY() }}px</p>`,
})
export class ScrollTrackerComponent implements OnInit, OnDestroy {
  private ngZone = inject(NgZone);
  private cdr = inject(ChangeDetectorRef);

  scrollY = signal(0);
  private handler!: () => void;

  ngOnInit(): void {
    // Bad: addEventListener inside Zone triggers change detection on every scroll
    // window.addEventListener('scroll', () => this.scrollY.set(window.scrollY));

    // Good: run outside Zone -- no CD on every scroll tick
    this.ngZone.runOutsideAngular(() => {
      this.handler = () => {
        const y = window.scrollY;
        // Re-enter Zone only when value meaningfully changes
        if (Math.abs(y - this.scrollY()) > 50) {
          this.ngZone.run(() => {
            this.scrollY.set(y);
            // ChangeDetectorRef.detectChanges() also works with OnPush
          });
        }
      };
      window.addEventListener('scroll', this.handler, { passive: true });
    });
  }

  ngOnDestroy(): void {
    window.removeEventListener('scroll', this.handler);
  }
}

import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
import { NgFor } from '@angular/common';

interface Order { id: number; customer: string; total: number; }

@Component({
  selector: 'app-order-table',
  standalone: true,
  imports: [NgFor],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- Bad: no trackBy -- entire list re-created on each data refresh -->
    <tr *ngFor="let order of orders()">
      <td>{{ order.id }}</td>
      <td>{{ order.customer }}</td>
    </tr>

    <!-- Good: trackBy by id -- only changed rows get DOM updates -->
    <tr *ngFor="let order of orders(); trackBy: trackById">
      <td>{{ order.id }}</td>
      <td>{{ order.customer }}</td>
    </tr>

    <!-- Angular 17+ @for syntax: track is mandatory and built-in -->
    @for (order of orders(); track order.id) {
      <tr>
        <td>{{ order.id }}</td>
        <td>{{ order.customer }}</td>
      </tr>
    }
  `,
})
export class OrderTableComponent {
  orders = signal<Order[]>([]);

  // trackBy function for *ngFor
  trackById(_index: number, order: Order): number {
    return order.id;
  }
}

<!-- editor-page.component.html -->

<!-- Trigger element -- the defer block loads when user clicks this -->
<button #editorTrigger (click)="showEditor.set(true)">
  Open Editor
</button>

<!-- Bad: heavy editor is in the main bundle, parsed at startup -->
@if (showEditor()) {
  <app-rich-text-editor />
}

<!-- Good: editor chunk loads only on first interaction -->
@defer (on interaction(editorTrigger)) {
  <app-rich-text-editor />
} @placeholder {
  <div class="editor-placeholder" style="min-height: 400px;">
    Click to activate editor
  </div>
} @loading (minimum 150ms) {
  <div class="editor-loading" style="min-height: 400px;">
    Loading editor...
  </div>
} @error {
  <p>Editor failed to load. Please refresh.</p>
}

<!-- For chart libraries: defer on viewport instead -->
@defer (on viewport; prefetch on idle) {
  <app-analytics-chart [data]="chartData()" />
} @placeholder {
  <div style="height: 320px; background: var(--color-surface-2);"></div>
}

import { Component, ChangeDetectionStrategy, signal, inject } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';

// Polyfill for environments without scheduler.yield
function yieldToMain(): Promise<void> {
  if ('scheduler' in window && 'yield' in (window as any).scheduler) {
    return (window as any).scheduler.yield();
  }
  return new Promise(resolve => setTimeout(resolve, 0));
}

@Component({
  selector: 'app-report-builder',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button (click)="buildReport()" [disabled]="processing()">
      {{ processing() ? 'Processing...' : 'Build Report' }}
    </button>
    <p>Processed {{ processedCount() }} of {{ totalCount() }} rows</p>
  `,
})
export class ReportBuilderComponent {
  private cdr = inject(ChangeDetectorRef);

  processing = signal(false);
  processedCount = signal(0);
  totalCount = signal(0);

  async buildReport(): Promise<void> {
    const rows = await this.fetchRawData(); // assume large dataset
    const BATCH_SIZE = 200;

    this.processing.set(true);
    this.totalCount.set(rows.length);
    this.cdr.detectChanges();

    const results: ProcessedRow[] = [];

    for (let i = 0; i < rows.length; i += BATCH_SIZE) {
      const batch = rows.slice(i, i + BATCH_SIZE);
      results.push(...batch.map(row => this.processRow(row)));
      this.processedCount.set(i + batch.length);
      this.cdr.detectChanges(); // update progress indicator

      // Yield to browser between batches -- keeps each task under 50ms
      await yieldToMain();
    }

    this.processing.set(false);
    this.cdr.detectChanges();
  }

  private processRow(row: RawRow): ProcessedRow {
    // CPU-intensive transformation
    return { ...row, computed: row.value * 1.2 };
  }

  private async fetchRawData(): Promise<RawRow[]> {
    return fetch('/api/report-data').then(r => r.json());
  }
}

interface RawRow { id: number; value: number; }
interface ProcessedRow extends RawRow { computed: number; }