How to use loader while page rendering in angular 2?

Question

I have a loader.gif image with a flag variable to show and hide.

<div [hidden]="IsLoading" class="loadingDiv"></div>

In my html having 200 records without pagination(the requirement is not need pagination). So I felt the rendering time is taking some time(around 5-10 sec). so I have planed to use loader .

cutomLoad() {
        this.IsLoading = false;
        this.tyreAndRimList = this.temptyreAndRimList;  // here having 200 records.       
        this.IsLoading = true;
    }

May be some guy's misunderstood my abouve question .I have tried above code. The code run very quick so am unable to see the loader But the page rendering is taking more time( I don't want set timeout for some seconds ). I decided to show a loader on starting time of page rendering and hide the loader while end of the page rendering . But I don't have any idea about this.

EDIT

I don't want to do this in when I change the navigation. I have using observable in $http call. So I can easily use the loader. that's not a problem. the main problem is when I filter/sort the 200 records at this time the same 200 records will re-rendering. In this time I want use loader.

Answer 1

If you do decide to use a route resolver, then you can set up a loading image based on the routing events. Something like this:

export class AppComponent {
    pageTitle: string = 'Acme Product Management';
    loading: boolean = true;

    constructor(private router: Router) {

        router.events.subscribe((routerEvent: Event) => {
            this.checkRouterEvent(routerEvent);
        });
    }

    checkRouterEvent(routerEvent: Event): void {
        if (routerEvent instanceof NavigationStart) {
            this.loading = true;
        }

        if (routerEvent instanceof NavigationEnd ||
            routerEvent instanceof NavigationCancel ||
            routerEvent instanceof NavigationError) {
            this.loading = false;
        }
    }
}

So when you route to your component the loading is set to true. As the data is loaded as part of the resolver the image will display. Then when the resolver data is complete, the route is complete and loading is set to false.

I have an example of route resolve here: https://github.com/DeborahK/Angular-Routing in the APM-Final folder.

Answer 2

I think no need to write this function as well.
If you might have seen how root component works in index.html eg, <app-root>loading...</app-root> in this 'loading...' will automatically be removed once a component has been loaded. so you can use the same concept here. <component-selector><img src="..gif path"/></component-selector> .

Answer 3

cutomLoad() {
        this.IsLoading = false;
        this.tyreAndRimList = this.temptyreAndRimList;  // here having 200 records.       

    }

this.cutomLoad().then((resp) => {
      this.IsLoading = true;
  },
  error => {
      console.log(error);
      alert(error);
  });