Async component not rendering properly


#1

Hi guys. Hope someone can help me because this is driving me crazy.

I have a page, which is the main view and a component. When a certain event occurs I render this component which calls a DataService, performs some operations and interpolate the component with the data. In my main view I have:

<div *ngIf="message.type === 'card'">
    <div class="message">
      <exp-card></exp-card>
    </div>
</div>

And my exp-card component is declared outside this @Page. The problem is that in the browser with ionic serve this is working perfectly. First it renders the component view without the data, and when the data came from an API the component is populated with the data. But when I try this on iOS simulator or on a real device the component is never populated with the data from the service, it is always empty.

I have been trying to render the component when the data has “arrived” but it is impossible for me because of using the <exp-card> selector, it automatically renders the component view without waiting for the data.

How could I accomplish this? Thank you very much