title: Angular 4 - check if all page resources are fully loaded (make loader spins until all resources are fully loaded)
body: <p>I am creating a loader for my angular app at work.</p>
  
  <p>The most common method is passing the boolean parameter on subscribing http request, but my service's response is a series of image URLs because the page is full of images.</p>
  
  <p>Thus the loader stopped when the URLs are retreived but due to a slow connection, the users are irritated because the image has not finished loading.</p>
  
  <p>I have tried to use Javascript's load event to listen to when my resources have finished loading so I can stop the loader at that time, but it seems like I cannot manipulate the loader's value from the listener function. </p>
  
  <p>Here's what I've tried:</p>
  
  <pre><code>//the TS component 
  isLoading: boolean;
  
  ngOnInit() {
  this.isLoading = true;
  this.checkIfLoaded();
  }
  
  checkIfLoaded() {
    window.addEventListener("load", function (event) {
      console.log("All resources finished loading!");
      //here i should do something, either returning false or...
      //...manipulating the isLoading, but i can't access isLoading from here
    });
  }
  
  
  //the template
  &lt;ng-container *ngIf="isLoading"&gt;
     &lt;app-spinner&gt;&lt;/app-spinner&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>Environment: Angular 4.4
  Any help are much appreciated, thanks</p>