jquery not finding items when routing in Angular

Question

I have the following code inside my angular component that is run inside ngOnInit():

animateMobileSkillBar() : void {
    console.log("Animation skillbar out");
    $( document ).ready(function() {
      console.log("Animation skillbar inside document ready");
      $(".skillbars").each(function() {
        console.log("Animation skillbar for each skillbar");
        // The stuff I need to do...
      }
    }
}

I added the $(document).ready because it didn't work before. Now it works on page load. But when I do routing it does not. I know the script is running and I get printed "Animation skillbar inside document ready". So for some reason, the problem is $(".skillbars").each().

Why is this not working? I feel as if the skillbars are not ready but that was the goal of document.ready right?

console.log($(".skillbars")); and see what do you get. Also what if you try to call the code after ngAfterViewInit() ? Try doing that. — Sagar Khatri, May 22 '20 at 11:11

score 1 · Answer 1 · answered May 22 '20 at 11:11

1

Place the code in ngAfterViewInit() so that the HTML is loaded

answered May 22 '20 at 11:11

Hemanth B

267
2
10

score 1 · Answer 2 · answered May 22 '20 at 11:11

1

Check https://angular.io/guide/lifecycle-hooks.

ngOnInit can be used when you want to do stuff with input properties, etc.. The view is not ready at that state.

Try to put it - without the document.ready stuff - in ngAfterViewInit.

answered May 22 '20 at 11:11

Paul

2,086
1
8
16

score 1 · Accepted Answer · answered May 22 '20 at 11:12

1

You can move your implementation into ngAfterViewInit(). where the view will be initialized with all bindings. For more information look the link https://angular.io/api/core/AfterViewInit.

You do not need to do this document.ready.

answered May 22 '20 at 11:12

Darpan

234
3
15

Solved. I need to wit 6 mins to mark it as a solution. – J Agustin Barrachina May 22 '20 at 11:15
sure, and it's not good practice to use jquery like this in angular code. – Darpan May 22 '20 at 11:20

jquery not finding items when routing in Angular

3 Answers3