Fully load content before showing it with Angular 2

Question

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?

What do you get from `generateImage()` call ? It seems to return an `Observable`, but what would be the value of `x` ? Is it an url for the generated image ? — hlobit, Jun 19 '18 at 10:26
the x value is just a true or false, for rather or not the call was successful. if true, the image has been created and stored in the image folder, if false there was on error on generating it. — Anders Pedersen, Jun 19 '18 at 10:38
So if the value is `true` you know how to find an url or a blob for the image right ? Why wouldn't you then emit an event from your component with this url or blob for display ? — hlobit, Jun 19 '18 at 10:51

Ketan Akbari · Accepted Answer · 2018-06-19T12:27:25.637

3

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;
})

edited Jun 19 '18 at 12:27

answered Jun 19 '18 at 10:51

Ketan Akbari

10,837
5
31
51

score 0 · Answer 2 · answered Jun 19 '18 at 10:28

On your ngOnInit use :

  ngOnInit() {
   this.someService.generateImage().subscribe(x => {
    //load page content functions.
    console.log('Image is now in folder')
   });
  }

This is a work around since ngOnInit() on itself doesn't wait for async calls

score 0 · Answer 3 · answered Jun 19 '18 at 10:29

Why stop the ngOnInit execution instead let it load all the dependency just don't show it, The hack you can apply is hiding the contents of the complete page by a blocking loader with a loader service and show the content of the page when the image is generated. Something like this.

ngOnInit() {
   loaderService.show();
   this.someService.generateImage().subscribe(x => {
     loaderService.hide();
     console.log('Image is now in folder')
   }
   [Extra dependencies stuff .....]
}

score 0 · Answer 4 · answered Jun 19 '18 at 10:56

0

You can use ngAfterViewInit() It get executed after dom loaded fully

answered Jun 19 '18 at 10:56

Sidhanshu_

1,714
1
7
10

Fully load content before showing it with Angular 2

4 Answers4