Angular check if observable is null in template

Question

I have an observable defined in my angular component like this.

profiles$!: Observable<Profile[] | undefined>;`

I try to check the length of this array in my template like this.

<div *ngIf="(profiles$ | async).length > 0"></div>

With this construct I get the error message Object is possibly 'null' or 'undefined'. from the typescript compiler which is totally fine. So add a null check to my if condition.

<div *ngIf="(profiles$ | async) && (profiles$ | async).length > 0"></div>

I'm still getting the same error that the object is possible null. I guess the compiler dose not recognise the null check. My question is how to do the null check to avoid the error from the typescript compiler.

You can try just (profiles$ | async)?.length > 0. I guess in the second example the compiler can't know that the value has to exist because of (profiles$ | async). — martin
– martin, Commented Dec 21, 2020 at 23:01

Mario Petrovic · Accepted Answer · 2020-12-22 00:10:38Z

7

the problem will happen in case the observable return a null

<div *ngIf="(profiles$ | async).length > 0"></div>

a quick way solve to this problem is to use the safe navigation operator ?

<div *ngIf="(profiles$ | async)?.length > 0"></div>

or you can use ng-container with ngIf in case you want to apply extra check of the return value of the observable

<ng-container *ngIf="(profiles$ | async) as result">
  <div *ngIf="result.length > 0"></div>
</ng-container>

edited Dec 22, 2020 at 0:10

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

answered Dec 21, 2020 at 23:29

Muhammed Albarmavi

24.6k9 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular check if observable is null in template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related