6

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.

Scipion
  • 11,449
  • 19
  • 74
  • 139
  • Just to add to Nguyen's answer: You can also refer to: http://stackoverflow.com/questions/37611549/how-to-pass-parameters-rendered-from-backend-to-angular2-bootstrap-method – Rashmi Dixit Aug 30 '16 at 04:26
  • https://stackoverflow.com/questions/41619443/how-to-call-an-rest-api-while-bootstrapping-angular-2-app – rmcsharry May 23 '17 at 10:24

3 Answers3

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.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
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

Nguyễn Việt Trung
  • 283
  • 1
  • 6
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>

Reginaldo Camargo Ribeiro
  • 767
  • 4
  • 15