Type ‘X| null’ is not assignable to type ‘boolean’ fix for async pipe in Angular
Async Pipe is a powerful tool to work with observables. It automatically subscribes to the stream, get’s us the data, and unsubscribes when the components are destroyed. There is one irritating point though; it returns T | null
which means that we have to check on null
before using it. This makes sense because observable might have no data yet so that it will be null
.
Nevertheless, there are lots of cases when we are certain that there will be data in observables and don’t need an extra check on null
. So, for example. Let’s imagine the following example
@Component({
selector:'app-component',
template:"
<ng-container *ngIf="users$ | async as users">
<app-users [users]="users"> </app-users>
</ng-container>
"
})
export class AppComponent{
users$= of([ {usernamne:'user1'},{username:'user2'} ]); // dummy data
}
@Component({
selector:'app-users',
template:"
<h1> {{users | json}} </h1>
"
})
export class UsersComponent{
@Input()
users!:User[]
}
even though the data exists in the users$
stream, we still need to check it on null
, because async
pipe returns T | null
so we can’t avoid it in any way. Fortunately, there’s another shorter way