Skip to main content

Change detection and components

Angular's default change detection runs globally by marking a dirty path.

To run change detection for a single component we can use the ChangeDetectorRef#detectChanges method. This will execute change detection on component level and the whole template gets updated.

Even if this is better than marking a path dirty, the smallest unit in the change detection process is a components template. For content or interaction rich components this is not enough to provide good UX. e.g. INP (Interaction to Next Paint)

By using RxAngular's template package and it's directives rxLet, rxFor and rxIf we can improve that and the smallest unit becomes the directive's EmbeddedView. This enables fine-grained reactivity on template binding level which comes with a dramatic performance boost.