Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

*ngFor loop with async pipe?

Tags:

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?

like image 953
Ole Avatar asked Jan 08 '18 23:01

Ole


People also ask

Can async pipe be used with NgFor?

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.

Does async pipe automatically unsubscribe?

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.

What does pipe async do?

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.


1 Answers

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.

like image 167
mgm87 Avatar answered Sep 20 '22 12:09

mgm87