How To Load All Data Before Rendering View Component In Angular 4

Meet again with my article on Angular 4 tutorial. This time I will share how to load initial data before rendering a view on Angular 4. The problem with Javascript programming is that Javascript will not wait for all initial data loaded first then renders view to display HTML page because javascript is asynchronous programming.

If you are familiar with PHP (PHP implements synchronous), it will be a bit of a struggle when switching to javascript (one of them is Angular framework). I’m used to PHP, so it’s having a little trouble when migrating using Angular. Follow this short tutorial how to render all data before displaying a view on angular 4.

Another article : Easy Way Pass Data To CanActivate Guard Angular 4 For Beginner

In fact, Angular has provided API to handle load initial data problem. However, beginners like me are lazy to read the entire documentation on Angular’s official website. The API is called “RESOLVE,” where all data will be loaded on the route before the route executes the page the user visits.

I summarize from the Angular’s official site.

Resolver guard is pre-fetching component data. In short, you want to delay sending components into the route until all the necessary data taken.

Up here I hope you understand what I have to say above how to fetch all the required data before the angular component renders the look of a browser page. Okay, look at the code below the way I use the “RESOLVE” property on Angular 4.

How To Load All Data Before Rendering View Component In Angular 4 Min

Tutorial how to load all initial data before rendering view in angular 4 route

Create a new script ts with contact.resolve.ts name and fill in the following code:


Creating resolve code is similar to how to create a service on Angular. The ContactResolve class is an implementation of the Resolve class. Resolve can take parameters passed on the route with the “route.queryParams” command.

Add the resolve parameter to the angular routing like the following code.


Using the property resolve on the Angular route is easy. By adding the resolve’s parameter and resolve service you have created above, Angular will reload all the required components before rendering the view to the component.

In the above manner, we can reload all data required by a component until the process is complete and then Angular will render the view and the data displayed into a component template.

Until this process, the resolve implementation can run well; it would be better to add loading bar or please wait for animation while waiting for the route to resolve all data to make the view more beautiful.

Demo use resolve you can try the following plunker

Another article: Angular 4 Tutorial For Beginner With Simple App Project

So my brief tutorial on how to reload all initial data before rendering the view on route Angular 4 with property “resolve.” If you want to download all example project using RESOLVE in tutorial Angular 4, please download through my GitHub link.

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.