Search code examples
angulartypescriptasync-awaitconstructorcomponents

How to deal with async initialized data in Angular component?


The data needed to load my component is being retrieved by first reading ActivatedRoute.queryParams, second making some API call. As both an async constructor and an async call inside ngOnInit won't work to somehow defer component initialization, inside my component I must assume my data being undefined, which leads to a number of tedious if cases.

One way around this is not to use this.data but let my class methods take the data as an argument. With one single check *ngIf="data != null" at the template root, passing the non-undefined data around requires no nullish checks anymore.

But this is not really how class fields should be used I guess. So what's the recommended way to deal with asynchronously initialized component data?

I was for example thinking of some ready flag plus telling typescript that if ready is truthy, data is not undefined. But I don't really know how to achieve this.


Solution

  • I think this article could help you.

    This article is about angular 13, but should work in older/ Newer versions as well.

    "In angular 13, how can I get all API data before rendering the Page?"

    https://royeraadames.medium.com/in-angular-13-how-can-i-get-all-api-data-before-rendering-the-page-93ee045b9c09

    Let me know if this was helpfull or you need some more help!