binding to a variable that gets data in async mode in angular 2+

Question

I have the following template that renders user details:

<ion-buttons end>
  <button (click)="loadProfilePage()" ion-button clear item-end icon-right>{{ api.userData?.inventory?.points }}/
    <p ion-text color="gold">{{ api.userData?.inventory?.credits }}</p>
    <ion-icon name="contact"></ion-icon>
  </button>
</ion-buttons>

So there is a provider (api) that is fetching this data at the app startup from local storage.

Currently I am using "?" signs to indicate that this evaluation should be "lazy" as data might not be yet there and api.userData can hence return undefined.

Question - is this a proper implementation or should I switch to observable and async pipe?

It feels like what I have right now works, but I am not sure if this approach with ? is exaclty how it should work for data binding to variables who are obtaining their value at the app start form async source (local persistence)

It depends on how you expect it to behave. Should the button be disabled? Use something like [disabled]=" api.userData", and you should keep ?.. Should it not exist? Use ngIf, and you can omit ?.. — Estus Flask
– Estus Flask, Commented Feb 6, 2018 at 0:21
thank you. I did add that and now it feels better (button disabled if data is not yet loaded) — Sergey Rudenko
– Sergey Rudenko, Commented Feb 6, 2018 at 4:02

DeborahK · Accepted Answer · 2018-02-06 01:55:12Z

1

You have several options:

1) You can use the safe navigation operator (?) like you are. That is a valid (and often used) option.

2) Use an ngIf on the button so the button does not even appear until the data is loaded. But that may not meet your requirements.

3) Use a route resolver and preload the data for a route before routing to that component. Then the data is ready for the page before it is displayed and you don't need ngIf or the safe navigation operator.

answered Feb 6, 2018 at 1:55

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

1 Comment

Sergey Rudenko Over a year ago

ha, pretty clear, in my case seems like its option 1. And probably I need to flag it as disabled as estus suggests!

Alan Grosz · Accepted Answer · 2018-02-06 00:48:30Z

0

You can use an observable to subscribe when the data was loaded. And is better to use an attribute in the Component, empty by default and bind that attribute. In the subscription you only have to assing the new value.

answered Feb 6, 2018 at 0:48

Alan Grosz

1,33511 silver badges16 bronze badges

Collectives™ on Stack Overflow

binding to a variable that gets data in async mode in angular 2+

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related