Progress: {{progress}}%
\n *= 100\">Done processing {{label}} of Angular zone!
\n *\n * \n * \n * `,\n * })\n * export class NgZoneDemo {\n * progress: number = 0;\n * label: string;\n *\n * constructor(private _ngZone: NgZone) {}\n *\n * // Loop inside the Angular zone\n * // so the UI DOES refresh after each setTimeout cycle\n * processWithinAngularZone() {\n * this.label = 'inside';\n * this.progress = 0;\n * this._increaseProgress(() => console.log('Inside Done!'));\n * }\n *\n * // Loop outside of the Angular zone\n * // so the UI DOES NOT refresh after each setTimeout cycle\n * processOutsideOfAngularZone() {\n * this.label = 'outside';\n * this.progress = 0;\n * this._ngZone.runOutsideAngular(() => {\n * this._increaseProgress(() => {\n * // reenter the Angular zone and display done\n * this._ngZone.run(() => { console.log('Outside Done!'); });\n * });\n * });\n * }\n *\n * _increaseProgress(doneCallback: () => void) {\n * this.progress += 1;\n * console.log(`Current progress: ${this.progress}%`);\n *\n * if (this.progress < 100) {\n * window.setTimeout(() => this._increaseProgress(doneCallback), 10);\n * } else {\n * doneCallback();\n * }\n * }\n * }\n * ```\n *\n * @publicApi\n */\nclass NgZone {\n constructor({ enableLongStackTrace = false, shouldCoalesceEventChangeDetection = false, shouldCoalesceRunChangeDetection = false, }) {\n this.hasPendingMacrotasks = false;\n this.hasPendingMicrotasks = false;\n /**\n * Whether there are no outstanding microtasks or macrotasks.\n */\n this.isStable = true;\n /**\n * Notifies when code enters Angular Zone. This gets fired first on VM Turn.\n */\n this.onUnstable = new EventEmitter(false);\n /**\n * Notifies when there is no more microtasks enqueued in the current VM Turn.\n * This is a hint for Angular to do change detection, which may enqueue more microtasks.\n * For this reason this event can fire multiple times per VM Turn.\n */\n this.onMicrotaskEmpty = new EventEmitter(false);\n /**\n * Notifies when the last `onMicrotaskEmpty` has run and there are no more microtasks, which\n * implies we are about to relinquish VM turn.\n * This event gets called just once.\n */\n this.onStable = new EventEmitter(false);\n /**\n * Notifies that an error has been delivered.\n */\n this.onError = new EventEmitter(false);\n if (typeof Zone == 'undefined') {\n throw new RuntimeError(908 /* RuntimeErrorCode.MISSING_ZONEJS */, ngDevMode && `In this configuration Angular requires Zone.js`);\n }\n Zone.assertZonePatched();\n const self = this;\n self._nesting = 0;\n self._outer = self._inner = Zone.current;\n // AsyncStackTaggingZoneSpec provides `linked stack traces` to show\n // where the async operation is scheduled. For more details, refer\n // to this article, https://developer.chrome.com/blog/devtools-better-angular-debugging/\n // And we only import this AsyncStackTaggingZoneSpec in development mode,\n // in the production mode, the AsyncStackTaggingZoneSpec will be tree shaken away.\n if (ngDevMode) {\n self._inner = self._inner.fork(new AsyncStackTaggingZoneSpec('Angular'));\n }\n if (Zone['TaskTrackingZoneSpec']) {\n self._inner = self._inner.fork(new Zone['TaskTrackingZoneSpec']());\n }\n if (enableLongStackTrace && Zone['longStackTraceZoneSpec']) {\n self._inner = self._inner.fork(Zone['longStackTraceZoneSpec']);\n }\n // if shouldCoalesceRunChangeDetection is true, all tasks including event tasks will be\n // coalesced, so shouldCoalesceEventChangeDetection option is not necessary and can be skipped.\n self.shouldCoalesceEventChangeDetection =\n !shouldCoalesceRunChangeDetection && shouldCoalesceEventChangeDetection;\n self.shouldCoalesceRunChangeDetection = shouldCoalesceRunChangeDetection;\n self.callbackScheduled = false;\n forkInnerZoneWithAngularBehavior(self);\n }\n /**\n This method checks whether the method call happens within an Angular Zone instance.\n */\n static isInAngularZone() {\n // Zone needs to be checked, because this method might be called even when NoopNgZone is used.\n return typeof Zone !== 'undefined' && Zone.current.get(isAngularZoneProperty) === true;\n }\n /**\n Assures that the method is called within the Angular Zone, otherwise throws an error.\n */\n static assertInAngularZone() {\n if (!NgZone.isInAngularZone()) {\n throw new RuntimeError(909 /* RuntimeErrorCode.UNEXPECTED_ZONE_STATE */, ngDevMode && 'Expected to be in Angular Zone, but it is not!');\n }\n }\n /**\n Assures that the method is called outside of the Angular Zone, otherwise throws an error.\n */\n static assertNotInAngularZone() {\n if (NgZone.isInAngularZone()) {\n throw new RuntimeError(909 /* RuntimeErrorCode.UNEXPECTED_ZONE_STATE */, ngDevMode && 'Expected to not be in Angular Zone, but it is!');\n }\n }\n /**\n * Executes the `fn` function synchronously within the Angular zone and returns value returned by\n * the function.\n *\n * Running functions via `run` allows you to reenter Angular zone from a task that was executed\n * outside of the Angular zone (typically started via {@link #runOutsideAngular}).\n *\n * Any future tasks or microtasks scheduled from within this function will continue executing from\n * within the Angular zone.\n *\n * If a synchronous error happens it will be rethrown and not reported via `onError`.\n */\n run(fn, applyThis, applyArgs) {\n return this._inner.run(fn, applyThis, applyArgs);\n }\n /**\n * Executes the `fn` function synchronously within the Angular zone as a task and returns value\n * returned by the function.\n *\n * Running functions via `run` allows you to reenter Angular zone from a task that was executed\n * outside of the Angular zone (typically started via {@link #runOutsideAngular}).\n *\n * Any future tasks or microtasks scheduled from within this function will continue executing from\n * within the Angular zone.\n *\n * If a synchronous error happens it will be rethrown and not reported via `onError`.\n */\n runTask(fn, applyThis, applyArgs, name) {\n const zone = this._inner;\n const task = zone.scheduleEventTask('NgZoneEvent: ' + name, fn, EMPTY_PAYLOAD, noop, noop);\n try {\n return zone.runTask(task, applyThis, applyArgs);\n }\n finally {\n zone.cancelTask(task);\n }\n }\n /**\n * Same as `run`, except that synchronous errors are caught and forwarded via `onError` and not\n * rethrown.\n */\n runGuarded(fn, applyThis, applyArgs) {\n return this._inner.runGuarded(fn, applyThis, applyArgs);\n }\n /**\n * Executes the `fn` function synchronously in Angular's parent zone and returns value returned by\n * the function.\n *\n * Running functions via {@link #runOutsideAngular} allows you to escape Angular's zone and do\n * work that\n * doesn't trigger Angular change-detection or is subject to Angular's error handling.\n *\n * Any future tasks or microtasks scheduled from within this function will continue executing from\n * outside of the Angular zone.\n *\n * Use {@link #run} to reenter the Angular zone and do work that updates the application model.\n */\n runOutsideAngular(fn) {\n return this._outer.run(fn);\n }\n}\nconst EMPTY_PAYLOAD = {};\nfunction checkStable(zone) {\n // TODO: @JiaLiPassion, should check zone.isCheckStableRunning to prevent\n // re-entry. The case is:\n //\n // @Component({...})\n // export class AppComponent {\n // constructor(private ngZone: NgZone) {\n // this.ngZone.onStable.subscribe(() => {\n // this.ngZone.run(() => console.log('stable'););\n // });\n // }\n //\n // The onStable subscriber run another function inside ngZone\n // which causes `checkStable()` re-entry.\n // But this fix causes some issues in g3, so this fix will be\n // launched in another PR.\n if (zone._nesting == 0 && !zone.hasPendingMicrotasks && !zone.isStable) {\n try {\n zone._nesting++;\n zone.onMicrotaskEmpty.emit(null);\n }\n finally {\n zone._nesting--;\n if (!zone.hasPendingMicrotasks) {\n try {\n zone.runOutsideAngular(() => zone.onStable.emit(null));\n }\n finally {\n zone.isStable = true;\n }\n }\n }\n }\n}\nfunction delayChangeDetectionForEvents(zone) {\n /**\n * We also need to check _nesting here\n * Consider the following case with shouldCoalesceRunChangeDetection = true\n *\n * ngZone.run(() => {});\n * ngZone.run(() => {});\n *\n * We want the two `ngZone.run()` only trigger one change detection\n * when shouldCoalesceRunChangeDetection is true.\n * And because in this case, change detection run in async way(requestAnimationFrame),\n * so we also need to check the _nesting here to prevent multiple\n * change detections.\n */\n if (zone.isCheckStableRunning || zone.callbackScheduled) {\n return;\n }\n zone.callbackScheduled = true;\n Zone.root.run(() => {\n scheduleCallbackWithRafRace(() => {\n zone.callbackScheduled = false;\n updateMicroTaskStatus(zone);\n zone.isCheckStableRunning = true;\n checkStable(zone);\n zone.isCheckStableRunning = false;\n });\n });\n updateMicroTaskStatus(zone);\n}\nfunction forkInnerZoneWithAngularBehavior(zone) {\n const delayChangeDetectionForEventsDelegate = () => {\n delayChangeDetectionForEvents(zone);\n };\n const instanceId = ngZoneInstanceId++;\n zone._inner = zone._inner.fork({\n name: 'angular',\n properties: {\n [isAngularZoneProperty]: true,\n [angularZoneInstanceIdProperty]: instanceId,\n [angularZoneInstanceIdProperty + instanceId]: true,\n },\n onInvokeTask: (delegate, current, target, task, applyThis, applyArgs) => {\n // Prevent triggering change detection when the flag is detected.\n if (shouldBeIgnoredByZone(applyArgs)) {\n return delegate.invokeTask(target, task, applyThis, applyArgs);\n }\n try {\n onEnter(zone);\n return delegate.invokeTask(target, task, applyThis, applyArgs);\n }\n finally {\n if ((zone.shouldCoalesceEventChangeDetection && task.type === 'eventTask') ||\n zone.shouldCoalesceRunChangeDetection) {\n delayChangeDetectionForEventsDelegate();\n }\n onLeave(zone);\n }\n },\n onInvoke: (delegate, current, target, callback, applyThis, applyArgs, source) => {\n try {\n onEnter(zone);\n return delegate.invoke(target, callback, applyThis, applyArgs, source);\n }\n finally {\n if (zone.shouldCoalesceRunChangeDetection &&\n // Do not delay change detection when the task is the scheduler's tick.\n // We need to synchronously trigger the stability logic so that the\n // zone-based scheduler can prevent a duplicate ApplicationRef.tick\n // by first checking if the scheduler tick is running. This does seem a bit roundabout,\n // but we _do_ still want to trigger all the correct events when we exit the zone.run\n // (`onMicrotaskEmpty` and `onStable` _should_ emit; developers can have code which\n // relies on these events happening after change detection runs).\n // Note: `zone.callbackScheduled` is already in delayChangeDetectionForEventsDelegate\n // but is added here as well to prevent reads of applyArgs when not necessary\n !zone.callbackScheduled &&\n !isSchedulerTick(applyArgs)) {\n delayChangeDetectionForEventsDelegate();\n }\n onLeave(zone);\n }\n },\n onHasTask: (delegate, current, target, hasTaskState) => {\n delegate.hasTask(target, hasTaskState);\n if (current === target) {\n // We are only interested in hasTask events which originate from our zone\n // (A child hasTask event is not interesting to us)\n if (hasTaskState.change == 'microTask') {\n zone._hasPendingMicrotasks = hasTaskState.microTask;\n updateMicroTaskStatus(zone);\n checkStable(zone);\n }\n else if (hasTaskState.change == 'macroTask') {\n zone.hasPendingMacrotasks = hasTaskState.macroTask;\n }\n }\n },\n onHandleError: (delegate, current, target, error) => {\n delegate.handleError(target, error);\n zone.runOutsideAngular(() => zone.onError.emit(error));\n return false;\n },\n });\n}\nfunction updateMicroTaskStatus(zone) {\n if (zone._hasPendingMicrotasks ||\n ((zone.shouldCoalesceEventChangeDetection || zone.shouldCoalesceRunChangeDetection) &&\n zone.callbackScheduled === true)) {\n zone.hasPendingMicrotasks = true;\n }\n else {\n zone.hasPendingMicrotasks = false;\n }\n}\nfunction onEnter(zone) {\n zone._nesting++;\n if (zone.isStable) {\n zone.isStable = false;\n zone.onUnstable.emit(null);\n }\n}\nfunction onLeave(zone) {\n zone._nesting--;\n checkStable(zone);\n}\n/**\n * Provides a noop implementation of `NgZone` which does nothing. This zone requires explicit calls\n * to framework to perform rendering.\n */\nclass NoopNgZone {\n constructor() {\n this.hasPendingMicrotasks = false;\n this.hasPendingMacrotasks = false;\n this.isStable = true;\n this.onUnstable = new EventEmitter();\n this.onMicrotaskEmpty = new EventEmitter();\n this.onStable = new EventEmitter();\n this.onError = new EventEmitter();\n }\n run(fn, applyThis, applyArgs) {\n return fn.apply(applyThis, applyArgs);\n }\n runGuarded(fn, applyThis, applyArgs) {\n return fn.apply(applyThis, applyArgs);\n }\n runOutsideAngular(fn) {\n return fn();\n }\n runTask(fn, applyThis, applyArgs, name) {\n return fn.apply(applyThis, applyArgs);\n }\n}\nfunction shouldBeIgnoredByZone(applyArgs) {\n return hasApplyArgsData(applyArgs, '__ignore_ng_zone__');\n}\nfunction isSchedulerTick(applyArgs) {\n return hasApplyArgsData(applyArgs, '__scheduler_tick__');\n}\nfunction hasApplyArgsData(applyArgs, key) {\n if (!Array.isArray(applyArgs)) {\n return false;\n }\n // We should only ever get 1 arg passed through to invokeTask.\n // Short circuit here incase that behavior changes.\n if (applyArgs.length !== 1) {\n return false;\n }\n return applyArgs[0]?.data?.[key] === true;\n}\nfunction getNgZone(ngZoneToUse = 'zone.js', options) {\n if (ngZoneToUse === 'noop') {\n return new NoopNgZone();\n }\n if (ngZoneToUse === 'zone.js') {\n return new NgZone(options);\n }\n return ngZoneToUse;\n}\n\n// Public API for Zone\n\n/**\n * Provides a hook for centralized exception handling.\n *\n * The default implementation of `ErrorHandler` prints error messages to the `console`. To\n * intercept error handling, write a custom exception handler that replaces this default as\n * appropriate for your app.\n *\n * @usageNotes\n * ### Example\n *\n * ```\n * class MyErrorHandler implements ErrorHandler {\n * handleError(error) {\n * // do something with the exception\n * }\n * }\n *\n * @NgModule({\n * providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]\n * })\n * class MyModule {}\n * ```\n *\n * @publicApi\n */\nclass ErrorHandler {\n constructor() {\n /**\n * @internal\n */\n this._console = console;\n }\n handleError(error) {\n const originalError = this._findOriginalError(error);\n this._console.error('ERROR', error);\n if (originalError) {\n this._console.error('ORIGINAL ERROR', originalError);\n }\n }\n /** @internal */\n _findOriginalError(error) {\n let e = error && getOriginalError(error);\n while (e && getOriginalError(e)) {\n e = getOriginalError(e);\n }\n return e || null;\n }\n}\n/**\n * `InjectionToken` used to configure how to call the `ErrorHandler`.\n *\n * `NgZone` is provided by default today so the default (and only) implementation for this\n * is calling `ErrorHandler.handleError` outside of the Angular zone.\n */\nconst INTERNAL_APPLICATION_ERROR_HANDLER = new InjectionToken(typeof ngDevMode === 'undefined' || ngDevMode ? 'internal error handler' : '', {\n providedIn: 'root',\n factory: () => {\n const zone = inject(NgZone);\n const userErrorHandler = inject(ErrorHandler);\n return (e) => zone.runOutsideAngular(() => userErrorHandler.handleError(e));\n },\n});\n\n/**\n * An `OutputEmitterRef` is created by the `output()` function and can be\n * used to emit values to consumers of your directive or component.\n *\n * Consumers of your directive/component can bind to the output and\n * subscribe to changes via the bound event syntax. For example:\n *\n * ```html\n *