angular - using async pipe on observable<Object> and bind it to local variable in html

Question

Hi I have a observable user$ with a lot of properties (name, title, address...)

component{
  user$:Observerable<User>;
  constructor(private userService:UserService){
    this.user$ = this.userService.someMethodReturningObservable$()
  }
}

Is there a way to use the async pipe in the html template to subscribe to it and bind it to a local variable like this

<div #user="user$ | async">
  <h3> {{user.name}}
</div>

I know can can subscribe to it in the constructor and then unsubscribe in OnLeave/OnDestroy but I was just curious if I could use the async pipe.

Cheers

Herriot

As I know async pipe only works with *ngFor ? in that you can do this *ngFor="let u of (user = (user$ | async))" but seems fishy. need a bit practical. – Tinhorn

not async can work on a single observable as well, see ngrx/store :) – Herriot

Answer 1

# is template reference variable. It defers to DOM element and cannot be used like that.

Local variables aren't implemented in Angular as of now, this closed issue can be monitored for the references to related issues.

Since Angular 4 the syntax of ngIf and ngFor directives was updated to allow local variables. See ngIf reference for details. So it is possible to do

<div *ngIf="user$ | async; let user">
  <h3> {{user.name}} </h3>
</div>

This will create div wrapper element and will provide cloaking behaviour to it, so there's no need for ?. 'Elvis' operator.

If no extra markup is desirable, it can be changed to

<ng-container *ngIf="user$ | async; let user">...</ng-container>

If cloaking behaviour is not desirable, the expression can be changed to truthy placeholder value.

A placeholder can be empty object for object value,

<div *ngIf="(user$ | async) || {}; let user">
  <h3> {{user?.name}} </h3>
</div>

Or a space for primitive value,

<div *ngIf="(primitive$ | async) || ' '; let primitive">
  <h3> {{primitive}} </h3>
</div>

Contrastive

This is working for me, however I'm getting a warning saying 'of' expected. I think this is a tslint warning, but having a hard time finding any info for it. – Therm

@Therm It's hard to say what's wrong here, it looks like a part of some message. – Contrastive

Yeah I'm getting the same error with the 'of' expected, I was trying to reform it so it would make sense to both the linter and Angular, but that turns out to be a bit harder then expected. Feels like some automagic with the async pipe. – Morganstein

@BjornSchijff did you identify a workaround for 'of' expected? – Therm

@Therm You didn't mention that this is IDE warning, in fact. TSLint doesn't care about templates. – Contrastive

@Therm see the answer of Wooli Design, this is what worked for me. In regards to your IDE warning; if you use ng cli, this does care about templates and will throw errors if incompatibilities have been found. – Morganstein

@BjornSchijff To my knowledge, as and let are interchangeable, the latter is closer to how the directive is desugared without *, both are supported by Angular and Angular CLI. Do you have information that contradicts this? – Contrastive

Answer 2

@Bjorn Schijff and @estus

Instead of:

<div *ngIf="(user$ | async) || {}; let user">

Do:

<div *ngIf="(user | async) as user">

Hyacinthe

Yes, I have angular 4.4.3 – Hyacinthe

Both as and let are supported by the framework. Why exactly should it be done this way and not another? – Contrastive

I have no idea, it worked with angular 4.4.3. Maybe both works with angular 5. – Hyacinthe

Example given by @WooliDesign works, here is the doc link for ref – Scopolamine

You'll get unresolved variable error in Angular 8 by doing so. – Spend

If the user is not logged in, #2 will not get evaluated... big difference – Palinode

Answer 3

Use following syntax:

<div *ngIf="(user | async) as user"> 

Note: The addition of “as user” at the end of the expression.

What this will do is wait until user$ | async has evaluated, and bind the result to the value of user (non-dollar-suffixed).

Megaphone

How is this any different from @WooliDesign's answer? – Northbound

Answer 4

For *ngFor it's possible with added *ngIf directive on parent element:

    <ul *ngIf="users$ | async as users">
      <li *ngFor="let user of users">{{user.name}}</li>
      <li *ngIf="!users.length">No users</li>
    </ul>

If there's already a structural directive on the parent element, then introduction of an intermediate element like <ng-container> may be necessary.

Geisel