@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  // ...
})
export class MyComponent {}

@Component({
  template: `
    @for (item of items; track item.id) {
      {{ item.name }}
    }
  `
})
export class MyComponent {}

const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard/dashboard.component').then(m => m.DashboardComponent)
  }
];

@Component({
  template: `
    @defer (on viewport) {
      <heavy-chart-component />
    } @placeholder {
      <div>Loading...</div>
    }
  `
})
export class MyComponent {}

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
}

@Pipe({
  name: 'myPipe',
  pure: true // Default - only runs when input changes
})
export class MyPipe implements PipeTransform {}

// ❌ Bad
{{ calculateTotal() }}

// ✅ Good
{{ total }}

<img [ngSrc]="imageUrl" width="100" height="100" priority>

constructor(private cdr: ChangeDetectorRef) {}

updateData() {
  this.data = newData;
  this.cdr.detectChanges();
}

import { runOutsideAngular } from '@angular/core/zone';

onClick() {
  runOutsideAngular(() => {
    this第三方Lib.doSomething();
  });
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection()
  ]
};

constructor() {
  afterNextRender(() => {
    // Runs after rendering, outside zone
  });
}

# Analyze bundle
ng build --stats-json
npx webpack-bundle-analyzer dist/stats.json

@Component({
  standalone: true,
  imports: [CommonModule],
  // ...
})
export class MyComponent {}