Angular 10 check if a user is null to hide component element

Question

I have a component where I want to hide an element if the user is null. Currently it shows if the user exists:

 <ng-container *ngIf="user | async as _user">

Here is the component.ts part:

 this.user = this.auth.userSubject.asObservable();

I want to do the opposite of:

 <ng-container *ngIf="user | async as _user">

so that it only shows if the user$ is null

at the top of the logout component is:

 userSubject: BehaviorSubject<UserModel>;

when they log out:

this.userSubject.next(null);

score 1 · Accepted Answer · answered Nov 23 '20 at 17:23

1

If you want the opposite behavior just negate your *ngIf

<ng-container *ngIf="!(user | async)">

Quick example: StackBlitz

answered Nov 23 '20 at 17:23

Marek W

It is not good practice to negate async expressions, I really cant remember why, but its better to have `` – Owen Kelvin Nov 23 '20 at 18:34

score 0 · Answer 2 · answered Nov 23 '20 at 19:24

0

<ng-container *ngIf="!user | async"> should probably work for you

answered Nov 23 '20 at 19:24

2 Answers2