Zone.js is a JavaScript library for creating execution contexts that track asynchronous activity. Angular uses those notifications to run change detection, compare template bindings, and update the UI after state changes. section 10.3.1
This approach removes much manual DOM coordination, but it can trigger checks when an asynchronous event changes nothing. Large object traversals, repeated template-function calls, runtime overhead, memory pollution, and slower updates motivate zoneless Angular designs. section 10.3.2 section 10.3
The Angular interaction follows this sequence:
- An event, promise, timeout, or interval runs inside a tracked zone. section 10.3.1
- Zone.js notifies Angular that asynchronous activity occurred. section 10.3.1
- Angular checks component bindings and renders changed values. section 10.3.1
- The application may perform broad or repeated checks even when relevant state did not change. section 10.3.2
@Component({
selector: 'app-some-component',
template: `
<p>{{name}}</p>
<button (click)="name = 'Alex'">Change name</button>
`,
standalone: true,
})
export class SomeComponent {
name = 'John';
}
A button changes component state, allowing Angular’s change-detection cycle to update the interpolated name without manual DOM manipulation. section 10.3.1
