Angular2 - ngAfterViewChecked is called many times. How to call a method only once after fully loading the DOM?

Question

I need to apply the plugin jqueryto the switches in Angular2using Typescript.

If I assign to ngAfterViewChecked, it is called many times, and the control is updated several times.

What is the alternative solution to calling the javascript method after the DOM is ready?

Answer 1

Try it ngAfterViewInitand see here .

Answer 2

I use ngAfterViewChecked when I am dependent on DOM readiness.

import {Component, AfterViewChecked} from '@angular/core'; 

export class NavBar implements AfterViewChecked{

   ngAfterViewChecked(){
      // jquery code here
   }
}

Answer 3

ngAfterViewChecked () will be called as soon as the DOM tree receives any changes.

So, if the DOM tree has been changed many times, the ngAfterViewChecked () method will be called many times.

Suggest not to include business logic in this method. But instead, only the update logic associated with the update is used, for example, to scroll down the window if a new message arrives.