Search code examples
javascriptangularngoninit

Fully load content before showing it with Angular 2

In an angular component I'm generating an image from a service http call, which then I want to display on the site. However it's taking longer for the image to generate than it takes the site to load.

Thus I'm forced to refresh a few extra times to see/display the actual image when it finally loads.

How can i make ngOnit wait for everything to be generated and loaded before displaying the page?

this.someService.generateImage().subscribe(x => {
    console.log('Image is now in folder')}

I want the page to be displayed after this call.

Any hints for this?

Solution

  • You can do like this:

    Markup:

    <div *ngIf="!isLoading">
   // do not show till loading
</div>

    Component:

    isLoading = true;

this.someService.generateImage().subscribe((x) => {
   console.log('Image is now in folder')
   this.isLoading = false;
})