Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 265
Han Che Avatar asked Apr 10 '17 14:04

Han Che


2 Answers

# 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> 
like image 177
Estus Flask Avatar answered Oct 11 '22 01:10

Estus Flask


@Bjorn Schijff and @estus

Instead of:

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

Do:

<div *ngIf="(user | async) as user"> 
like image 40
Wooli Design Avatar answered Oct 11 '22 01:10

Wooli Design