Angular 2 load data before rendering the app

Question

In my main component's ngOnInit I do get some global settings :

ngOnInit() {
   this._service1.initGlobalData()
   this._service2.initGlobalData2()
}

these 2 calls initialize _service1 and _service2 which are then used in several different places in my app. I would like to be sure these 2 calls are done before starting rendering my application.

Is there any specific way to do it in Angular 2 ?

The only solution that comes up to my mind would be to set a spinner up based on the promises returned by these two init calls.

Just to add to Nguyen's answer: You can also refer to: stackoverflow.com/questions/37611549/… — Rashmi Dixit
– Rashmi Dixit, Commented Aug 30, 2016 at 4:26

Günter Zöchbauer · Accepted Answer · 2016-06-21 15:10:33Z

5

The answer is not very popular but I think the easiest way it to just wrap your template with *ngIf="data" then the template will only be rendered after data has a value assigned.

The router (depending on what version you're using) might have lifecycle callback that allows to delay the component to be added until a promise is resolved.

answered Jun 21, 2016 at 15:10

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Comments

Nguyễn Việt Trung · Accepted Answer · 2016-06-22 04:48:49Z

4

You can use https://angular.io/docs/ts/latest/api/core/index/APP_INITIALIZER-let.html

An example (take a look at the bottom of the page): https://github.com/angular/angular/blob/master/modules/%40angular/router/src/common_router_providers.ts

answered Jun 22, 2016 at 4:48

Nguyễn Việt Trung

3111 silver badge6 bronze badges

Comments

Reginaldo Camargo Ribeiro · Accepted Answer · 2016-06-21 17:46:15Z

3

Normally my team and I use ngIf to render the content when it's ready. Something like:



<div *ngIf="_service1">
   // content for _service1
</div>
<div *ngIf="_service2">
   // content for _service2
</div>

answered Jun 21, 2016 at 17:46

Reginaldo Camargo Ribeiro

7684 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular 2 load data before rendering the app

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related