angular - using async pipe on observable

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

score 153 · Accepted Answer · edited Sep 16 '21 at 18:30

153

# 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 '21 at 18:30

Mathias

1,819
4
22
34

answered Apr 10 '17 at 15:38

Estus Flask

206,104
70
425
565

1

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. – Blexy Jul 11 '17 at 18:53
@Blexy It's hard to say what's wrong here, it looks like a part of some message. – Estus Flask Jul 11 '17 at 19:12
1

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. – Bjorn 'Bjeaurn' S Aug 02 '17 at 09:02
@BjornSchijff did you identify a workaround for `'of' expected`? – Blexy Sep 29 '17 at 01:10
@Blexy You didn't mention that this is [IDE warning](https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000491110-Angular-4-HTML-template-of-expected-error), in fact. TSLint doesn't care about templates. – Estus Flask Sep 29 '17 at 02:39
@Blexy 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. – Bjorn 'Bjeaurn' S Nov 16 '17 at 10:00
@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? – Estus Flask Nov 16 '17 at 12:26

score 42 · Answer 2 · answered Sep 28 '17 at 07:56

42

@Bjorn Schijff and @estus

Instead of:

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

Do:

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

answered Sep 28 '17 at 07:56

Wooli Design

421
4
3

Yes, I have angular 4.4.3 – Wooli Design Sep 29 '17 at 06:29
2

Both `as` and `let` are supported by the framework. Why exactly should it be done this way and not another? – Estus Flask Nov 16 '17 at 12:30
I have no idea, it worked with angular 4.4.3. Maybe both works with angular 5. – Wooli Design Nov 16 '17 at 14:24
Example given by @WooliDesign works, here is the doc [link for ref](https://angular.io/api/common/NgForOf) – Vino Sep 15 '18 at 11:17
You'll get unresolved variable error in Angular 8 by doing so. – Wildhammer Aug 12 '19 at 15:16
If the user is not logged in, #2 will not get evaluated... big difference – Jonathan Oct 23 '21 at 05:11

s sharif · Answer 3 · 2019-08-01T14:15:36.217

8

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 01 '19 at 14:15

answered Sep 18 '18 at 09:43

s sharif

724
1
10
19

4

How is this any different from @WooliDesign's answer? – Jonathan Lam Jul 15 '20 at 20:10

score 1 · Answer 4 · answered Dec 04 '22 at 22:52

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.

angular - using async pipe on observable

4 Answers4

Linked