Angular Performance Article

01-on-push.ts

@Component({
  selector: 'my-component',
  template: '{{ foo }}',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input()
  foo: string;
}

02-on-push.html

<my-component [foo]="bar"></my-component>

03-cd-ref.ts

data: string;
subscription: Subscription;

constructor(private dataService: DataService, private cdRef: ChangeDetectorRef) {}

ngOnInit() {
  this.subscription = this.dataService.updates$.subscribe(data => {
    this.data = data;
    this.cdRef.markForCheck();
  });
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

04-async-pipe.ts

data$: Observable<string>;

constructor(dataService: DataService) {
  this.data$ = dataService.updates$;
}

05-async-pipe.html

{{ data$ | async }}

06-debug-tools.ts

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(moduleRef => {
    const applicationRef = moduleRef.injector.get(ApplicationRef);
    const appComponent = applicationRef.components[0];
    enableDebugTools(appComponent);
  })

07-cd-cycles-demo.html

<div (click)="foo()">
  <button (click)="bar()">Test</button>
</div>

08-event-coalescing.ts

platformBrowserDynamic()
  .bootstrapModule(AppModule, { ngZoneEventCoalescing: true })
  .catch(err => console.error(err));

09-ng-zone.ts

constructor(ngZone: NgZone) {
  ngZone.runOutsideAngular(() => {
    // runs outside Angular zone, for performance-critical code

    ngZone.run(() => {
      // runs inside Angular zone, for updating view afterwards
    });
  });
}

10-zone-patches.ts

(window as any).__Zone_disable_requestAnimationFrame = true;
// disable patch requestAnimationFrame

(window as any).__Zone_disable_on_property = true;
// disable patch onProperty such as onclick

(window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove'];
// disable patch specified eventNames

11-manual-cd.ts

constructor(applicationRef: ApplicationRef) {
  applicationRef.tick();
}

12-zone-noop.ts

platformBrowserDynamic().bootstrapModule(AppModule, {
  ngZone: 'noop'
})