CODEWITHSUNDEEP
angularjs
Mika
Mika

Reputation: 5845

Wait for data to load before instantiating a component

I am using Angular 1.5. I have a component embedded in another component as demonstrated below. Problem is that the data variable is not yet resolved when angular fires component-child and so I get nothing. How do I wait for the variable to be resolved before the child component instantiates.

html

<component-parent>
     <component-child data="$ctrl.data._id"><\component-child>
</component-parent>

js

this.data = SomeResource.get();

Upvotes: 1

Views: 2706

Answers (2)

Chanthu
Chanthu

Reputation: 1794

How about using ng-if?

<component-parent>
     <component-child ng-if="$ctrl.data._id" data="$ctrl.data._id"> </component-child>
</component-parent>

Upvotes: 5

Tarun Dugar
Tarun Dugar

Reputation: 8971

You can use ngIf to defer compiling of the component to when the data loads:

Somesource.get().then(function(data) {
    this.makeComponentVisible = true;
});

<component-parent>
    <component-child ng-if="$ctrl.makeComponentVisible" data="$ctrl.data._id"><\component-child>
</component-parent>

Upvotes: 1

Related Questions