How can I call a function in jQuery once HTML is completely rendered dynamically in Angular 4?

Question

I am using Angular 4 for my web template. HTML is generated once the HTTP get method is called inside the constructor, the response of which creates the HTML.

The above works fine.

I am also using jQuery with Angular and trying to initialize a function on this page.

$(function() {
    Books.init();
});

I have tried calling the above code inside various lifecycle hooks. For example, ngOnInit(), ngOnChanges(), ngDoCheck, ngAfterViewInit(), ngAfterContentInit() but still the code gets called before the view is completely rendered by the API response.

Is there any way to get an event which assures that the view is completely rendered and then I can load my jQuery?

Please note: I have called this function inside a setTimeOut call with a small time delay and this works in that.

Comments are not for extended discussion; this conversation has been moved to chat. — Bhargav Rao
– Bhargav Rao, Commented Jan 2, 2018 at 11:21

Jay Momaya · Accepted Answer · 2018-01-02 14:08:16Z

1

I faced the same problem. I did not got any solution so I played with variables.

First of all take the length of how many elements you are going to render.

bookCount: number = 0;

Then in ngAfterContentChecked()

ngAfterContentChecked() {
if(this.bookCount > 0 && this.bookCount == document.getElementsByClassName('bk-book').length)
{
  this.getInitdata();
}

This worked for me temporarily, still looking for better solution.

answered Jan 2, 2018 at 14:08

Jay Momaya

2,0992 gold badges23 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

How can I call a function in jQuery once HTML is completely rendered dynamically in Angular 4?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related