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

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. — Babar Hussain
– Babar Hussain, Commented Apr 10, 2017 at 14:38
not async can work on a single observable as well, see ngrx/store :) — Han Che
– Han Che, Commented Apr 10, 2017 at 14:46

Mathias · Accepted Answer · 2021-09-16 18:30:14Z

161

# 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>

edited Sep 16, 2021 at 18:30

Mathias

2,0504 gold badges24 silver badges34 bronze badges

answered Apr 10, 2017 at 15:38

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

7 Comments

Nick Blexrud Over a year ago

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.

Estus Flask Over a year ago

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

Bjorn 'Bjeaurn' S Over a year ago

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.

Nick Blexrud Over a year ago

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

Estus Flask Over a year ago

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

|

Wooli Design · Accepted Answer · 2017-09-28 07:56:29Z

44

@Bjorn Schijff and @estus

Instead of:

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

Do:

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

answered Sep 28, 2017 at 7:56

Wooli Design

4414 silver badges3 bronze badges

6 Comments

Wooli Design Over a year ago

Yes, I have angular 4.4.3

Estus Flask Over a year ago

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

Wooli Design Over a year ago

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

Vino Over a year ago

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

Wildhammer Over a year ago

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

|

s sharif · Accepted Answer · 2019-08-01 14:15:36Z

9

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).

edited Aug 1, 2019 at 14:15

answered Sep 18, 2018 at 9:43

s sharif

7331 gold badge10 silver badges20 bronze badges

1 Comment

Jonathan Lam Over a year ago

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

Daniel Kucal · Accepted Answer · 2022-12-04 22:52:07Z

1

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.

answered Dec 4, 2022 at 22:52

Daniel Kucal

9,3227 gold badges46 silver badges69 bronze badges

Comments

Faouzi Chabchoub · Accepted Answer · 2024-12-01 17:37:17Z

1

For the versions of angular 17+, the new syntax is like so:

@if(user$ | async; as user) {
    <h3> {{user.name}} </h3>
}

answered Dec 1, 2024 at 17:37

Faouzi Chabchoub

2414 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

7 Comments

6 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

6 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related