Is there any equivalent of window.onload event in Angular?

I want to fade out and remove my preloader but only after all resources like images are loaded. Since $viewConteneLoaded indicates only html insertion into view (i am using ngRotue) listening to it is not sufficient.

I would like to capture window.onload event, but don't know how to do it properly and what is the best-practice for doing it in Angular, so that digest would fire.

Is there any equivalent of window.onload event in Angular?

I want to fade out and remove my preloader but only after all resources like images are loaded. Since $viewConteneLoaded indicates only html insertion into view (i am using ngRotue) listening to it is not sufficient.

I would like to capture window.onload event, but don't know how to do it properly and what is the best-practice for doing it in Angular, so that digest would fire.

• javascript
• angularjs

• $window.onload = function() {}; try this. – Manikandan Velayutham Commented Feb 28, 2017 at 7:20

5 Answers 5

Write the following in the ponent file:

import { HostListener } from '@angular/core';

...

@HostListener('window:load')
onLoad() {
  console.log('is window:load');
}

...

What about:

ngAfterViewInit(){
   // your code ...
}

It runs after the view is fully loaded.
https://angular.io/api/core/AfterViewInit#ngAfterViewInit

Try to use $window.onload event.

Example:

angular.element($window).bind('load', function() {
    //put your code
});

For Angular 12

angular.element(window).bind('load', function() {
    //put your code
});

Use angular's init() function to hide your preloader and run it at bottom of your page/controller so that all the content is finished loading before it reaches init function.

You can use angular.element(document).ready(); as below

 angular.element(document).ready(function () {
       //do something
    });