what triggers change detection when using OnPush and setInterval outside angular zone with markForCheck?

Question

I couldn't really understand what is causing change detection to run in the below code. I understand that markForCheck doesn't do it but something must do it because the view is updated if you play it in https://angular.dev/playground.

import {bootstrapApplication} from '@angular/platform-browser';
import { Component, NgZone, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p>Time: {{ currentTime }}</p>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush // Use OnPush for better performance
})
export class IntervalExampleComponent implements OnInit, OnDestroy {
  currentTime!: Date;
  intervalId!: any;

  constructor(private ngZone: NgZone, private changeDetectorRef: ChangeDetectorRef) {}

  ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
      this.intervalId = setInterval(() => {
        this.currentTime = new Date();
        this.changeDetectorRef.markForCheck();
      }, 1000);
    });
  }

  ngOnDestroy() {
    clearInterval(this.intervalId);
  }
}

bootstrapApplication(IntervalExampleComponent);

I expect to see no view update since setInterval is run outside of angular zone and markForCheck doesn't trigger change detection.

Matthieu Riegler · Accepted Answer · 2025-02-13 09:25:10Z

0

Since v18, markForCheck schedules change detection.

answered Feb 13 at 9:25

Matthieu Riegler

59.8k27 gold badges158 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Luke Feb 13 at 18:06

thanks for the info. Would you mind sharing the source? I checked release note and source code but haven't found anything.

Matthieu Riegler Feb 13 at 19:20

The change spans several commits and is not obvious in the change log. This commit is probably the closest to what you are looking for. github.com/atscott/angular/commit/…

Collectives™ on Stack Overflow

what triggers change detection when using OnPush and setInterval outside angular zone with markForCheck?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related