In a zoneless Angular application, which notifications schedule change detection, and why does a field assigned inside setTimeout never render?

## The scheduler needs to be told In a **zoneless** Angular application (the default since v21) there is no zone.js watching timers, promises and DOM events. Angular's internal change-detection scheduler instead waits for a **notification** from one of Angular's own APIs, then schedules one pass over the view tree. The notifications listed in the zoneless guide and in the `provideZonelessChangeDetection()` API docs are: - **A signal read in a template is set.** The template is a reactive consumer; writing the signal marks that view for refresh, marks its ancestors for traversal and notifies the scheduler. - **`ChangeDetectorRef.markForCheck()`** marks the view and its ancestors dirty. `AsyncPipe` calls it for every value its observable or promise delivers. - **A bound template or host listener runs**, such as `(click)="save()"` or a `host` listener. Angular marks the component's view dirty when the listener fires. - **`ComponentRef.setInput()`** gives a dynamically created component a new input. - **Attaching a view** that was marked dirty by one of the above; removing a view and registering a render hook also notify, but they refresh no template on their own. ## One check, not one per write Notifications are **coalesced**. If a click handler sets three signals, the scheduler records that a check is needed and ignores later notifications until that check has run. It times the check by racing a `setTimeout` against a `requestAnimationFrame` and running on whichever fires first, so updates normally land before the next paint. ## Why the timer case fails ```ts import {Component} from '@angular/core'; @Component({ selector: 'app-upload-status', template: `<p>Status: {{ status }}</p>`, }) export class UploadStatus { status = 'pending'; constructor() { setTimeout(() => (this.status = 'done'), 1000); } } ``` 1. The timer fires and assigns a plain class field. 2. Assigning a field calls no Angular API, so no notification is sent. 3. No check is scheduled, and the paragraph keeps showing `pending`. Under zone.js the same code worked, because the patched `setTimeout` told `NgZone` a task had finished and Angular ran a check. ## The "works by accident" trap The new value can still appear later if *something else* schedules a check, such as a click elsewhere on the page. Whether this component is refreshed then depends on its strategy and on what the other notification was: | Strategy | Refreshed by an unrelated check? | |---|---| | `Eager` (the old `Default`) | Often: a click or `markForCheck()` elsewhere refreshes the views up to the root, and Eager children of a refreshed view are refreshed too | | `OnPush` (the default since v22) | No: it was never marked dirty, so it is skipped | That is why a zoneless bug can look intermittent: a value that "shows up when I click somewhere else" is a missing notification. ## The listener-plus-await variant A bound listener notifies **when it fires**, not when the work it starts finishes: ```ts async reload() { // bound as (click)="reload()" const res = await fetch('/api/items'); this.items = await res.json(); // plain field: no notification } ``` The click schedules a check that runs before the response arrives; the later assignment notifies nobody. With `HttpClient` and `AsyncPipe`, or a signal `set()`, the second update is noticed. ## How to spot a missing notification - The value appears only after an unrelated interaction, such as a click or a keypress elsewhere on the page. - The value appears in tests that call `fixture.detectChanges()` but not in the running application. - The component's data is correct when logged to the console, but the template shows the previous value. - The code that changes the value runs inside a timer, a promise continuation, a WebSocket handler or a callback registered with a non-Angular library. Each of these points to the same root cause: state that the template reads was changed without any of Angular's notification APIs being involved. Development builds can make this visible systematically: `provideCheckNoChangesConfig({exhaustive: true, interval})` periodically re-checks views and throws when a binding changed without a notification. ## Fixes, in order of preference 1. **Hold template state in signals** and update it with `set()` or `update()`; the template read does the rest. 2. **Deliver streams through `AsyncPipe`** (or `toSignal`), which notify on every value. 3. **Call `ChangeDetectorRef.markForCheck()`** after mutating a plain field when the code cannot move to signals yet. What does **not** help: calling `NgZone.run()`. In a zoneless app the injected `NgZone` is a no-op implementation whose `run()` just invokes the function, so it schedules nothing.