Event when AngularJS finished changing DOM

Question

I have some AngularJS code which sets up some scope fields very quickly, but then takes AngularJS and/or Chrome a long time to create and render the DOM. This is mainly due to a few ng-repeat bindings to long lists in the scope. The browser freezes for a couple of seconds whilst preparing and rendering the DOM.

I'd like to know when the browser has finished, so that I can display a loading sign whilst the browser is busy, and then display the resulting DOM once it has finished. What techniques are available for achieving this?

Berlin_Bro · Accepted Answer · 2017-11-08 08:34:58Z

1

Angular is providing a great way to catch the moment your component is done loading. have a look at Lifecyle Hooks. They are built in ways to hook on these angular defined events and are super easy to use(see tutorial in the link).

In your case i would go with ngAfterViewInit() or ngAfterViewChecked().

Hope you find this usefull feel free to add questions.

answered Nov 8, 2017 at 8:34

Berlin_Bro

1096 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DGarvanski Over a year ago

OP is asking about AngularJS, not Angular. You linked to the Angular docs. AngularJS lifecycle hooks are document here: docs.angularjs.org/guide/component

Simon Green Over a year ago

Thanks, but no joy. I'm using directives, not components. I tried listening to the $postLink event, but it never gets fired.

Simon Green Over a year ago

Also, it seems that the post link directive method is getting run before any DOM manipulation or rendering occurs, not after...

Collectives™ on Stack Overflow

Event when AngularJS finished changing DOM

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related