Angular async pipe and object property [duplicate]

The error is surprisingly accurate as the *ngIf directive expects true or false and uses the resulting expression to determine whether or not to render the HTML element in the DOM.

EXCEPTION: Invalid argument ‘true’ for pipe ‘AsyncPipe’ in [!user$.anonymouse | async in SettingsPage@27:22]

The expression you have is user$.anonymouse which evaluates as truthy, but unfortunately you cannot use the async pipe with this directive. The async pipe “transforms” (also known as “pipes”) the input exposing the resulting output within the scope of the *ngFor directive for example.

The pipe expects one of three possible types, defined below (detailed about AsyncPipe):

transform(obj: Observable<any>| Promise<any>| EventEmitter<any>)

Is there any way how to solve this?

Yes, you can either use it as it was designed. For example in an *ngFor directive:

<ion-item *ngFor="(user$ | async)?.anonymouse">
     <ion-label>Login</ion-label>
</ion-item>

Or you could remove the piping altogether as it’s not needed for the *ngIf directive:

<ion-item *ngIf="user$.anonymouse">
     <ion-label>Login</ion-label>
</ion-item>