How can I convert this code to work with async?

Question

I have the following code:

HTML

<div *ngIf="users">
    <ul>
        <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
</div>

TS FILE

export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {};
  users: any;
  ngOnInit() {
   this.subscription = this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(users => {
    this.users = users;
   })
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

i want to avoid manually unsubscribing and want to use async. How can i convert this to work with async pipe because when i try

<li *ngFor="let user of users | async">{{ user.name }}</li>

i get

Error: InvalidPipeArgument: '[object Object],[object Object],[object Object],

Arash Hatami · Accepted Answer · 2020-11-25T13:03:23.417

2

The angular async pipe allows the subscription to observables inside of the angular template syntax. It also takes care of unsubscribing from observables automatically. So you Shouldn't subscribe that. TS FILE

ngOnInit() {
   this.users = this.http.get('https://jsonplaceholder.typicode.com/users');
}

HTML

<li *ngFor="let user of users | async">{{ user.name }}</li>

edited Nov 25 '20 at 13:03

answered Nov 25 '20 at 12:55

Arash Hatami

522
4
10

Thanks for the reply.Is users | async enough in ngIf directive ? – Nov 25 '20 at 13:13
@Michel your welcome , yes it is, *ngIf="observable$ | async" – Arash Hatami Nov 25 '20 at 13:19
1

Thanks.I accepted your answer.So after in the ngOnInit if i need to access the data in the typescript file then i just use subscribe ? – Nov 25 '20 at 13:24
@Michel your welcome , you can subscribe or use pipe(tap( res=>{/* access the data*/})) – Arash Hatami Nov 25 '20 at 13:27
The idea is not to use subscribe at all,how can i get the value now in typescript value – Nov 25 '20 at 14:08
@Michel if you subscribe the observable you cant subscribe it any more . but if you pipe it i think it is possible – Arash Hatami Nov 25 '20 at 14:12
@Michel please post new question – Arash Hatami Nov 25 '20 at 14:12
https://stackoverflow.com/questions/65006559/how-can-i-get-values-from-observable-without-using-subscribe – Nov 25 '20 at 14:22
I posted Arash. Here is the link – Nov 25 '20 at 14:22
@Michel did you try pipe(tap( res=>{console.log(res)})) – Arash Hatami Nov 25 '20 at 14:30

score 0 · Answer 2 · answered Nov 25 '20 at 12:58

You can use async pipe if you have an observable. Since you subscribed to it, the restul is no longer an observable.

So try something like this:

export class AppComponent implements OnInit {
    constructor(private http: HttpClient) {};
    users: any;
    ngOnInit() {
        this.users = this.http.get('https://jsonplaceholder.typicode.com/users');
    }
}

How can I convert this code to work with async?

2 Answers2