CODEWITHSUNDEEP
angulartypescriptpipelocal-variablesangular2-observables
Han Che
Han Che

Reputation: 8509

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

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

Upvotes: 74

Views: 75288

Answers (5)

Faouzi Chabchoub
Faouzi Chabchoub

Reputation: 221

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

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

Upvotes: 1

Daniel Kucal
Daniel Kucal

Reputation: 9232

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.

Upvotes: 1

Estus Flask
Estus Flask

Reputation: 222300

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

Upvotes: 161

s sharif
s sharif

Reputation: 733

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

Upvotes: 9

Wooli Design
Wooli Design

Reputation: 441

@Bjorn Schijff and @estus

Instead of:

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

Do:

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

Upvotes: 44

Related Questions