19

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?

Sujatha Girijala
  • 1,141
  • 8
  • 20
Kcs
  • 191
  • 1
  • 1
  • 4

4 Answers4

15

Try ngAfterViewInit and have a look here.

SeleM
  • 9,310
  • 5
  • 32
  • 51
  • 3
    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? – Hlawuleka MAS Dec 29 '17 at 12:18
  • 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! – SeleM Dec 29 '17 at 22:50
  • 4
    "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. – Hlawuleka MAS Dec 31 '17 at 17:01
  • @HlawulekaMAS What in rxjs helps in this scenario? – Sarah Mandana Dec 02 '22 at 12:45
7

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.

Prashant Pimpale
  • 10,349
  • 9
  • 44
  • 84
Richard
  • 2,080
  • 18
  • 17
1

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
   }
}
Prashant Pimpale
  • 10,349
  • 9
  • 44
  • 84
Amr Abdalrahman Ahmed
  • 920
  • 1
  • 14
  • 19
0

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;
      }
stolorma
  • 150
  • 1
  • 8