*ngIf with a NOT (!) with async pipe for BehaviorSubject or Promise throws condition error

Question

*ngIf for async NOT condition?

So I have a fairly simple login service that uses the behavior subject library to know when a user is logged in.

login.service.ts:

constructor(private http: HttpClient){
    this.loggedSubject = new BehaviorSubject<boolean>(false);
}

getLoginStatus(){
    return this.loggedSubject.asObservable();
}

And a login component, in which I want to make the register button NOT show if the user is logged in.

So I did followings in login.component.html:

<button mat-button class="menu-button" routerLink="/register"  (click)="sidenav.toggle()" *ngIf="!getLoginStatus() | async">
      <mat-icon>key</mat-icon>
      <span>Register</span>

where I've got:

ERROR

src/app/header/header.component.html:33:102 - error TS2769: No overload matches this call.
  Overload 1 of 3, '(obj: Observable<unknown> | Subscribable<unknown> | Promise<unknown>): unknown', gave the following error.
    Argument of type 'boolean' is not assignable to parameter of type 'Observable<unknown> | Subscribable<unknown> | Promise<unknown>'.
  Overload 2 of 3, '(obj: null | undefined): null', gave the following error.
    Argument of type 'false' is not assignable to parameter of type 'null | undefined'.
  Overload 3 of 3, '(obj: Observable<unknown> | Subscribable<unknown> | Promise<unknown> | null | undefined): unknown', gave the following error.
    Argument of type 'false' is not assignable to parameter of type 'Observable<unknown> | Subscribable<unknown> | Promise<unknown> | null | undefined'.

33     <button mat-button class="menu-button" routerLink="/register"  (click)="sidenav.toggle()" *ngIf="!getLoginStatus() | async">
                                                                                                        ~~~~~~~~~~~~~~~~~

  src/app/header/header.component.ts:21:16
    21   templateUrl: './header.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.

The above works perfectly without the "!" (not) operator. Also from what I've seen there's not ngNotIf, how can I bypass this problem?

Thanks to everyone for any answer.

score 2 · Accepted Answer · edited May 18 '23 at 20:00

2

*ngIf="!(getLoginStatus() | async)"

Demo https://stackblitz.com/edit/angular-kwl3qt?file=src/main.ts

edited May 18 '23 at 20:00

SwissCodeMen

4,222
8
24
34

answered May 18 '23 at 19:42

Nikita

682
2
13

Jesus, I'm sure I tried this syntax, but I was prolly mistyping something. Thanks, mate. – Henry McJonathan May 18 '23 at 19:47
I have added a demo – Nikita May 18 '23 at 19:50

score 1 · Answer 2 · answered Jul 06 '23 at 03:10

*ngIf="!(getLoginStatus() | async)"

caused ESLint to throw:

Async pipe results should not be negated.
Use `(observable | async) === false`, `(observable | async) === null`, or `(observable | async) === undefined` to check its value instead
eslint@angular-eslint/template/no-negated-async

Per ESLint documentation and the answer here, the following is better:

*ngIf="(getLoginStatus() | async) !== true"

score 0 · Answer 3 · answered May 18 '23 at 19:53

We are getting error on using ! (not operator) because we have used async pipe for either observables or promises. so what happened actually there the value does not get resolved or subscribed because its value is resolved or subscribed by async pipe so use:

*ngIf="!(getLoginStatus() | async)"

we just first resolved or subscribed the value (by putting in small brackets) then after getting value we attach the not (!) operator.

Brackets are the part of priority.

*ngIf with a NOT (!) with async pipe for BehaviorSubject or Promise throws condition error

3 Answers3