2

I am building this Angular 4.0 app to parse the URL on startup (let's say 1.mysite.com or 2.mysite.com, pointed at the same angular app) and I need to render different things on the page depending on what the different URLs are, after making an API call on app startup.

I'm seeing the app render before my API call is done, and then not update with the proper content when the API call is finished. Specifically I have a css class name that is being returned from the API, and I need to make sure the angular app does not render until I get that property value (and thus all of the returned content) and can set that class correctly in my view template. Some of the content will update properly when the API call is finished, but the few properties that will change css/sass values do not get set in time and you can only see them after you click something on the page (like a nav menu item) and then the different colors and widths etc. will show up.

Triggering a manual re-render isn't the way to go here because the page will chop and you'll see the sloppy update after the page loads. I don't want the user to see that happen, I just want to present the fully rendered page when the API call is done and I know what custom sass theme I need and all that jazz.

I've been looking at this for days and know that lifecycle hooks are useless to me in this case, and I can't figure out a way to force a synchronous call to pause everything else going on in Angular until it's finished. Advice is greatly appreciated.

RTurek
  • 61
  • 6
  • 1
    you could use a resolver, take a look https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html – Jota.Toledo Jun 13 '17 at 18:57

1 Answers1

1

Add the directive *ngIf="" to template until the return http response of service

alehn96
  • 1,363
  • 1
  • 13
  • 23
  • This was the first thing I tried, but it's still allowing the content to render with the wrong class still. – RTurek Jun 13 '17 at 19:18