Angular 2 async data binding not working

Question

In my application I have one component sending a user object to another component and it receives it correctly as proven by successful console.log(user.vendorname) returning as expected but it won't show up on the html. The html file

<div class="col-centered">
<h1 *ngIf="user | async">Welcome {{user.vendorname}}</h1>
</div>

The component file

import { User } from '../User';
import { AccountInfo } from './../AccountInfo';
import { LoginService } from './../login.service';
import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/map';






@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

user: User;
subscription: Subscription;



  constructor(route: ActivatedRoute, private loginService: LoginService) {



   }

  ngOnInit() {
    this.subscription = this.loginService.getMessage().subscribe(data => {

       this.user = data;
       console.log(this.user.vendorname);
    });
  }



  AfterViewInit(){

  }
ngOnDestroy() {
        // unsubscribe to ensure no memory leaks


    }

}

Adam Michalski · Accepted Answer · 2017-08-30 17:22:16Z

2

You need to pass observable to async pipe. async pipe idea is for short version so you dont neet to assign observable to any variable

Do something like

public get user() Observable<User> {
  return this.loginService.getMessage();
}

or

public getUser() Observable<User> {
  return this.loginService.getMessage();
}

And use it like

<your-component [yourInput]="user | async"></your-component>
or
<your-component [yourInput]="getUser | async"></your-component>

It is recomended because it automatically unsubscribes on destroy. There are exceptions where you need to watch out for:

When you use async in single template like you would get two requests:

(user | async).id
(user | async).name

docs

edited Aug 30, 2017 at 17:22

answered Aug 3, 2017 at 20:11

Adam Michalski

1,7923 gold badges17 silver badges40 bronze badges

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

2 Comments

majestyc54 Over a year ago

Am I supposed to then put into the template {{getuser()}} ?

Adam Michalski Over a year ago

No you use it in template as user so it looks like <h1 *ngIf="user | async">Welcome {{user?.vendorname}}</h1> with "?" mark

Pankaj Parkar · Accepted Answer · 2017-08-03 20:14:16Z

1

async pipe works only on Observable, here user object has value assigned to. To make it works with async pipe assign observable to user

import { Observable } from 'rxjs/Observable';//don't miss this import.

user: Observable<User>; //add declaration for user

ngOnInit() {
  this.user = this.loginService.getMessage()
}

edited Aug 3, 2017 at 20:14

answered Aug 3, 2017 at 20:07

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

16 Comments

majestyc54 Over a year ago

I did as you recommended and now it says "Type 'Observable<User>' is not assignable to type 'User'.Property 'valid' is missing in type 'Observable<User>' "

Alexander Staroselsky Over a year ago

user: Observable<User>; then ngOnInit() { this.user = this.loginService.getMessage(); }

Pankaj Parkar Over a year ago

@AlexanderStaroselsky thanks mate for head up, I updated the answer :)

majestyc54 Over a year ago

Tried it. The element doesn't appear onscreen and the console log doesn't work due to a type difference.

Pankaj Parkar Over a year ago

@majestyc54 why you need console log then? If you want to use some value from user then you have to again subscribe over this.user observable

|

Er Vipin Sharma · Accepted Answer · 2017-08-28 11:45:36Z

0

Try this:

public get user() Observable<User> {
  return this.loginService.getMessage();
}

answered Aug 28, 2017 at 11:45

Er Vipin Sharma

2,6699 gold badges25 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular 2 async data binding not working

3 Answers 3

2 Comments

16 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

16 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related