Reading through this article and it has an ngFor loop like this:
*ngFor="let contact of contacts | async"
How does the async
pipe work in this context?
Use the async pipe with ngIf We above example uses the async pipe with interpolation. We can also use it with the ngIf or ngFor etc.
Every time a new value is emitted the async pipe will automatically mark your component to be checked for changes. And best of all, when the component is destroyed the async pipe will automatically unsubscribe for you. No need to do this manually.
The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.
The async pipe gives the latest value from an observable. In this case (as in other cases) it will refresh the data involved when a new value comes down the observable. So if the screen renders and the observable updates the ngFor will re-render.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With