
Max Koretskyi



Signals in Angular: deep dive for busy developers
Building complex user interfaces is a difficult task. In modern web applications, UI state is rarely comprised of simple standalone values. It’s rather a complicted computed state that depends …


Change Detection Big Picture – Overview
Overview In any application, the process of updating the screen takes the internal state of the program and projects it into something users can see on the screen. In …


Running change detection – Detached views
Detached views In the chapter manual control we learnt how and where to use first 3 methods of a change detector service: detectChanges, checkNoChanges and markForCheck. In this chapter …


Expression changed error – Debugging algorithm
Debugging techniques In the previous section, we identified several design patterns that commonly lead to “Expression Changed After It Has Been Checked” error. In this section we’ll see how …


Optimization techniques – Reusing views
Reusing views Sometimes you may need to implement a show-then-hide UI workflow that repeatedly re-renders the same component or a view template. In the example below, the button a …


Change Detection Big Picture – Operations
Operations When Angular runs change detection for a particular component (view) it performs a number of operations. Those operations are sometimes referred to as side effects, as in a …


Running change detection – Preventing autorun
Preventing autorun There are certain scenarios where we may not want Angular to run change detection automatically. This is often the case when the application code or a third …


Debugging techniques – Angular DevTools
Angular DevTools Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications. There’s a good coverage of its capabilities in the official docs. Here …


Debugging techniques – Profiling
Profiling Change detection cycle sometimes can cause your application jankiness. Since change detection is synchronous, when it takes too much time, the browser doesn't have enough time to re-render …


Optimization techniques – OnPush strategy
OnPush CD strategy Angular implements two strategies that control change detection behavior on the level of individual components. Those strategies are defined as Default and OnPush: export enum ChangeDetectionStrategy …


Running change detection – Components tree
Components tree With component based approach in web applications, composition is achieved by including child components in templates. For this reason, we can think of an Angular application as …


Running change detection – Autorun with zones
Autorun with zones Change detection (rendering) in Angular is usually triggered completely automatically as a result of async events in a browser. This is made possible by utilizing zones …