// Default strategy — checks on every CD cycle
@Component({
  selector: 'app-list-item',
  template: `<li>{{ item.name }}</li>`,
  // changeDetection: ChangeDetectionStrategy.Default  ← implicit default
})
export class ListItemComponent {
  @Input() item!: { name: string; active: boolean };
}

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-user-card',
  standalone: true,
  // Only re-render when inputs change or template signals emit
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="card">
      <h3>{{ user.name }}</h3>
      <p>{{ user.email }}</p>
    </div>
  `,
})
export class UserCardComponent {
  @Input() user!: User;
}

// Parent component
@Component({ selector: 'app-parent' })
export class ParentComponent {
  user = { name: 'Alice', email: 'alice@example.com' };

  updateName(newName: string): void {
    // ✗ WRONG — mutates the object; OnPush child won't re-render
    this.user.name = newName;

    // ✓ CORRECT — creates a new object reference
    this.user = { ...this.user, name: newName };
  }
}

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [AsyncPipe, CurrencyPipe],
  template: `
    @if (portfolio$ | async; as portfolio) {
      @for (stock of portfolio.stocks; track stock.symbol) {
        <div>{{ stock.symbol }}: {{ stock.price | currency }}</div>
      }
    }
  `,
})
export class PortfolioComponent {
  portfolio$ = this.marketService.getLivePortfolio();
  constructor(private marketService: MarketService) {}
}

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

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-data-grid',
})
export class DataGridComponent {
  private cdr = inject(ChangeDetectorRef);
  data: Record<string, unknown>[] = [];

  // Called from a third-party library callback (outside Angular zones)
  onDataUpdate(newData: Record<string, unknown>[]): void {
    this.data = newData;
    // Manually notify Angular that this component needs to be checked
    this.cdr.markForCheck();
  }

  // Immediately run CD for this component and its ancestors
  forceRefresh(): void {
    this.cdr.detectChanges();
  }

  // Detach the component — completely opt out of automatic CD
  pauseUpdates(): void {
    this.cdr.detach();
  }

  // Re-attach and resume
  resumeUpdates(): void {
    this.cdr.reattach();
    this.cdr.markForCheck();
  }
}

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

@Component({
  selector: 'app-metrics',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p>Requests: {{ requestCount() }}</p>
    <p>Success rate: {{ successRate() }}%</p>
  `,
})
export class MetricsComponent {
  requestCount = signal(0);
  successCount = signal(0);

  successRate = computed(() => {
    const total = this.requestCount();
    const success = this.successCount();
    return total > 0 ? Math.round((success / total) * 100) : 0;
  });

  recordRequest(success: boolean) {
    this.requestCount.update(n => n + 1);
    if (success) this.successCount.update(n => n + 1);
    // Angular automatically schedules a re-render for this component
    // No Zone.js, no markForCheck() needed
  }
}

import { NgZone, inject } from '@angular/core';

@Component({ selector: 'app-animation' })
export class AnimationComponent {
  private ngZone = inject(NgZone);
  private cdr = inject(ChangeDetectorRef);

  startAnimation(): void {
    // Run the requestAnimationFrame loop outside Angular
    // No CD triggered on every frame
    this.ngZone.runOutsideAngular(() => {
      const loop = () => {
        this.updateCanvas(); // pure DOM/canvas manipulation

        if (this.isRunning) {
          requestAnimationFrame(loop);
        } else {
          // Re-enter Angular zone to update component state
          this.ngZone.run(() => {
            this.finalScore = this.calculateScore();
          });
        }
      };
      requestAnimationFrame(loop);
    });
  }

  isRunning = true;
  finalScore = 0;
  private updateCanvas() { /* canvas drawing */ }
  private calculateScore() { return 100; }
}

// main.ts — opt into Zoneless
import { bootstrapApplication } from '@angular/platform-browser';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    // No more ZoneJS — smaller bundle, faster startup
  ],
});

// angular.json — remove zone.js from polyfills
{
  "polyfills": []
}