change-detection-hell-loop

app.component.ts

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

@Component({
  selector: 'app',
  template: `
    <h3>Change detection hell loop</h3>

    <div>Counter: {{ counter }}</div>

    <div>
      <button (click)="increment()">Increment</button>
      <button (click)="decrement()">Decrement</button>
    </div>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements DoCheck {
  counter = 0;

  resolvedPromise = Promise.resolve(null)
  ttl = 5;

  increment() {
    this.counter++;
  }

  decrement() {
    this.counter--;
  }

  ngDoCheck() {
    console.log('Angular change detection cycle is running.');

    if (--this.ttl === 0) {
      console.error('CD is triggred five times... Stop the hell loop...');
      return;
    }

    this.resolvedPromise
        .then(
          () => console.log(`This is a microtask scheduled during change detection phase...`)
        );
  }
}