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;
  constructor(private userServic         


        

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

  
 {{user.name}}

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

...

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

A placeholder can be empty object for object value,

  
 {{user?.name}}

Or a space for primitive value,

  
 {{primitive}}