How to make router wait with loading webpage until condition is true?

Question

I am wondering how I can make router wait with initialisation of a view, until I get the values from backend. My case is: I have a ecommerce shop, which gets the list of products based on the city you've picked in the first step. When user refreshes webpage on any other step, he should be presented with list of products, that are not yet fetched from the server. How can I make the router/component wait until products are indeed loaded, to load the view?

Answer 1

You can use guards or resolver to delay routing See also

• https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard
• https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html
• How to make Angular2 wait for a promise before rendering component

or APP_INITIALIZER to delay bootstrapping until the configuration is available.
See also

• Angularjs2 - preload server configuration before the application starts