zone.js

import { Component, NgZone, OnInit } from '@angular/core';
import { interval } from 'rxjs';

@Component({
  selector: 'app-zone-event',
  templateUrl: './zone.component.html',
})
export class ClickEventComponent implements OnInit {
  clock = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  ];
  clockZone = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  ];
  source = interval(100);

  constructor(private zone: NgZone) {
  }

  ngOnInit(): void {
    this.doBindInZone();
    this.doBindOutsideZone((i) => {
      this.zone.run(() => {
        this.clockZone.forEach((row, key) => {
          for (let j = 0; j < 10; j++) {
            this.clockZone[key][j] = this.clockZone[key][j] + i;
          }
        });
      });
    });
  }

  private doBindInZone() {
    this.source.subscribe(() => {
      this.clock.forEach((row, key) => {
        for (let i = 0; i < 10; i++) {
          this.clock[key][i] = this.clock[key][i] + 1;
        }
      });
    });
  }

  private doBindOutsideZone(done: (i: number) => void) {
    let i = 100;
    this.zone.runOutsideAngular(() => {
      this.source.subscribe(() => {
        i = i + 100;
        if (i % 1000 === 0) {
          done(10);
        }
      });
    });
  }
}