Angular 2: defer component rendering until service asynchronously initializes

Question

I have an Angular 2 app which I'd like to keep as lean as possible (traffic-wise) and load certain data sets (from API URL) only when it is required.

The service that is responsible for loading the data is passed to a ui component constructor as a dependency. The component template has many references to the service's properties and methods. I can initiate the data loading in the constructor, but since the loading happens asynchronously, the component is already rendered when the data arrives.

So, basically, I am looking for a way to defer the component rendering until the service is initialized with the fresh data loaded from API. Currently I have a basic route with component that checks if the service is initialized, and navigates to the final route when it has finished initialization. But this is not pretty because it requires two routes for one view.

Do you have any particular problems with using route resolvers for that? That's what they are basically for. — Estus Flask
– Estus Flask, Commented Mar 26, 2017 at 12:03
If you're using the router angular.io/docs/ts/latest/guide/router.html#!#resolve-guard is a good choice. — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 26, 2017 at 13:42
Yep, the route resolver was the way I finally solved it. Thanks. — Passiday
– Passiday, Commented Apr 3, 2017 at 21:00

eko · Accepted Answer · 2017-03-26 11:38:14Z

3

You can do something like this;

Let's say that you are getting the data from your async call like this:

this.myService.myAsyncCall().subscribe((res)=>{...})

inside this async call lets say you are assigning the response to a field of the component

this.myService.myAsyncCall().subscribe((res)=>{
    this.field = res.data.list;
})

and you don't want your template to get rendered until this data arrives so you can use an *ngIf inside your template:

<div *ngIf="field && field.length && field.length > 0">
  ...
</div>

This is just an approach. You can use the safe navigation operator(?) for smaller operations but since you haven't provided any info about your code, I have given a generic answer.

answered Mar 26, 2017 at 11:38

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

5 Comments

Estus Flask Over a year ago

It's just field?.length.

eko Over a year ago

@estus thanks. I just wanted to emphasize that ngIf could be used to combine ifs. Maybe the OP is combining 2 async fields so it may be done like field && anotherField

Passiday Over a year ago

@echonax I'd have to wrap the whole template in a div with *ngIf, because there are quite many instances where the data from the service are pulled. It's a service that provides text snippets in UI for the selected language.

eko Over a year ago

@Passiday well you can either use it like this or use a resolver like people mentioned in the comments. What's the problem with using this one?

Passiday Over a year ago

@echonax thanks, I'll test the both ways. I'm kind of not happy with wrapping the whole template just because one service that needs loading. I hoped to solve this in code only.

Collectives™ on Stack Overflow

Angular 2: defer component rendering until service asynchronously initializes

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related