Angular2 -- ngAfterViewChecked is called many times..How to call a method just once after DOM is completely loaded?

Question

I need to apply jquery plugin to radio buttons in Angular2 using Typescript.

If I assign in ngAfterViewChecked, it is called many times and the control is refreshed multiple times.

What is the alternate solution for calling the javascript method after DOM is ready?

Granger

Answer 1

Try ngAfterViewInit and have a look here.

Laboured

But what happens when there's changes that need to be tracked and you want to run some function after there's been such a change? Does ngAfterViewInit run multiple times/all the time? – Cathicathie

Yes all the time , you can merely use RxJs for what you're asking for.. kind of watching a stream of changes , once you'll get what you need you'll fire a specific event! – Laboured

"Yes all the time" - I disagree, it does not run all the time. If you console.log() something inside ngAfterViewInit it will not be logged infinitely, thus it does not actually run all the time. "use RxJs for what you're asking for" - this makes sense and would definitely work. – Cathicathie

@HlawulekaMAS What in rxjs helps in this scenario? – Romona

Answer 2

ngAfterViewChecked() would be invoked once the DOM tree get any change.

So if the DOM tree got change for many times, the ngAfterViewChecked() method would be invoked many times.

Suggest not to put business logic in this method. But only the screen refresh related logic instead, like to scroll the window to bottom if new message is coming in.

Cara

Answer 3

I have been using ngAfterViewChecked when I depend on the DOM being ready.

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

export class NavBar implements AfterViewChecked{

   ngAfterViewChecked(){
      // jquery code here
   }
}

Zacharyzacherie

Answer 4

I don't exactly know what you need to do and or achieve but I will show you my solution for a similar use case.

My Problem was that I needed to scroll down a div on load. AfterViewChecked got executed multiple times but I needed to scroll down in this lifecycle. Thats what I did, maybe it helps you:

    public scrollSuccessfull = false; // global variable


    public ngAfterViewChecked(): void {
        if (!this.scrollSuccessful) {
          // gets executed as long as the scroll wasnt successfull, so the (successful) scroll only gets executed once
          this.scrollSuccessful = this.scrollToBottom(this.internal ? this.internalChatDiv : this.externalChatDiv);
        }
      }

    private scrollToBottom(element: ElementRef): boolean {
        if (element) {
          element.nativeElement.scrollTop = element.nativeElement.scrollHeight;
          return element.nativeElement.scrollTop !== 0;
        }

        return false;
      }

Galanti