CODEWITHSUNDEEP
angularangular7property-binding
user6882156
user6882156

Reputation:

How to use property binding with asynchronous data?

I'm trying to connect an existent front-end with a new back-end. One of the front-end component has the following template:

<simplex-chart [numbers]="someData"></simplex-chart>

The existent front-end is rather a prototype in which data is static. In the new release, the data is not anymore static but they come from databses, via services. Hence, the property binding above doesn't work any more. How could I adapt it for data comming asynchronously ? I've seen constructs like {{ somedata | async }} but I didn't find any way to bind that to an input property. Any suggestion ? Many thanks in advance, Nicolas

Upvotes: 2

Views: 7322

Answers (3)

Jm3s
Jm3s

Reputation: 617

try the following: 

<ng-container *ngIf="someData | async as data"> 
   <simplex-chart [numbers]="data"></simplex-chart>
</ng-container>

Upvotes: 3

hohnzy
hohnzy

Reputation: 73

Try to use @Input()numbers: number[] = []; to have empty array as default value when you don't have the data from parent yet.

Upvotes: 3

Daniel Pi&#241;eiro
Daniel Pi&#241;eiro

Reputation: 3149

If someData it's and observable you can use the pipe async do something like this:

<simplex-chart [numbers]="someData | async"></simplex-chart>

More info about the pipe async here:

https://angular.io/api/common/AsyncPipe

Update:

Seeing that simplex-chart uses a @Input() numbers: number[], you can add a ngIf until the data is loadad. It would look something like this:

<simplex-chart *ngIf="someData" [numbers]="someData"></simplex-chart>

Upvotes: 1

Related Questions