New features are coming into NGRX, one of which is ngrx/component. It brings plenty of opportunities to make our programming easier & faster. Apparently, it appears onto the scene to help us get rid of the [async](https://angular.io/api/common/AsyncPipe) pipe in templates. But also, under the hood, it takes maximum advantage for Angular life cycles.
We will explore it briefly, and in the meantime, you will see the base of some concepts to understand why we should use this. Finally, we are going to apply it to an easy project done with NGRX, getting the benefits of this feature.
The Use Case
The use case is a simple to-do list built with Angular and NGRX superpower that we’ve already seen and improved in Part 1.Introduction
What is @ngrx/components?
From Docs:
Component is a set of primitive reactive helpers to enable fully reactive, fully zone-less applications. They give more control over rendering, and provide further reactivity for Angular applications.
In plain English:
Directives & Pipes to eliminate the use of Zones and improve the handling of Observables in Angular templates.
At the present moment, there are two:
But before we dive into them, let’s clarify why the need to replace the asyncpipe:
The problem is
_async_pipe just marks the component and all its ancestors as dirty. It needs zone.js microtask queue to exhaust until[_ApplicationRef.tick_](https://angular.io/api/core/ApplicationRef)is called to render all dirty marked components.
_Heavy dynamic and interactive UIs suffer from zones change detection a lot and can lean to bad performance or even unusable applications, but the _
_async_pipe does not work in zone-less mode.
Key Concepts
1. NgZone
Summarising, thanks to[NgZone](https://angular.io/guide/zone) Angular makes for us the detection of changes automatically in components with the aim of updating our HTMLs. Obviously, it costs in terms of CPU processing.
Problems with detect changes coming up with User Events, Requests & Timers that have something in common with Asynchronicity. Despite this, any time we use Observable, the right time is known to make the detection of changes and be rendered in our UI. And that changes everything.
Let’s see some examples so we can clarify all of these concepts about updating HTMLs.
#angular #ngrx #javascript #programming #typescript
