💥Angular Mistakes #1: ✋ DON'T Overuse the Async Pipe #angular

This video will talk about a very common Angular mistake, the overuse of the async pipe to access data observables in multiple places in the template.

We will present both the mistake and the solution.

Timestamps:

0:00 Intro
01:03 - Angular Mistake 1: The Problem
03:20 - Angular Mistake 1: The Solution

Related articles on the Angular University blog:

Free content at the Angular University:

Follow me:

[nunoarruda]

Tip: If you're using the latest version of RxJS, you can "simplify" the data$ observable further.
1. Define data$ directly in its declaration. No need for ngOnInit.
2. Use type inference. No need for manually typing Observable<PageData>, and no need for an extra interface.
3. Use an object directly in combineLatest. No need for an array + mapping to an object.

data$ = combineLatest({ courses: this.courses$, lessons: this.lessons$, users: this.users$ });

[esayed]

Thanks a lot. Your videos and blog posts combine simplicity and depth in a perfect way. Thanks again.

[aleksandrm]

Super, thanks for sharing. Looking forward for new one.

[andriesvanwyk]

Thank you so much, sir! Your content is extremely valuable! Please keep up the good work.

[abees]

Thank you for the video. I personally prefer using toSignal for each observable, then simply use computed to combine the three signal into a single source which could be easily consumed in the template.

[icoz]

We can something like this as well
<ng-container *ngIf="{ courses: (courses$ | async), activePage: (activePage$ | async), isLoading: (isLoading$ | async) } as vm">

[MrDrogoyonk]

Many thanks for sharing! I really appreciate your work!
Just one question, what if you need to display a loading for each block of data (courses, lessons, users)? Would you still have a single observable and async pipe and you would emit each time the data is available?
If so, would not it be a "performance issue"? I mean, if I update courses loading, it will emit this change to the single data observable and it will refresh the whole template, isn't it?

[antonisakov]

What about writing

@if ({
courses: courses$ | async,
lessons: lessons$ | async,
users: users$ | async
} as params) {
...
}

at the top of the component template? I think it is easier than using combineLatest in the component, isn't it?
4:31

[theGoldyMan]

I would just use an ngTemplateOutlet. I also think that an if statement with an object will always be truthy, even if one of the properties is undefined or null, because combineLatest will emit when any of the included observables emit, so you might get an issue here if you remove completely some of the ifs

[KiffinGish]

If a given component requires data from multiple sources, I always use a single resolver with a fork join. In my opinion, placing (complex) data handling in a component with conditional rendering is poor design. The whole idea behind resolvers is to avoid these extra calculations so that the component can be assured that the data is already available when the component is initialized.

[ratg]

can we use computedAsync with signas and solve the same problem?

[Mattakattak]

How would you manage errors with this pattern?

[LarsRyeJeppesen]

combineLatest will not emit an initial value until each observable emits at least one value.

[nomoredarts]

PageData should be type (alias), not interface