Angular 4 JS script not working after changing route

Question

I try to load a script via angular-cli to sync two divs. When page is loaded for the first time, the script is working fine. Aftter that I change the route via Navigation. When going back to the first page, the script is not working anymore.

Angular CLI:

  "scripts": [
    ....
    "assets/scripts/scrollsync.js"
  ]

scrollsync.js:

$(function() {
  $('#column-item-container').on('scroll', function () {
    $('#row-lead-container').scrollTop($(this).scrollTop());
  });

  $('#column-item-container').on('scroll', function () {
    $('#column-lead-container').scrollLeft($(this).scrollLeft());
  });
});

I try to figure out if the script is still present to set a timeout with 1000ms sending some to console, that works fine. I looks like the binding is not working anymore. Some advice to fix this problem? Thank you!

Kishan Mundha · Accepted Answer · 2017-09-21 17:13:51Z

2

This issue probably happening because most of third party library or custom code initialize on document ready event. So that's why it work first time. Once you navigate to another page and come back on same page, angular not reloading page, it just render html part and document ready event not fire.

Solution

Bind event when your page open, not on document ready.
You can make a directive to bind scroll event, directive will always bind event when dom element bind, it not depend on document ready event.

answered Sep 21, 2017 at 17:13

Kishan Mundha

3,15120 silver badges26 bronze badges

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

3 Comments

mnlfischer Over a year ago

Solve it with create a custom typing and call a bind-method in ngOnInit.

Abijith Ajayan Over a year ago

@Kishan Mundha Am working with angular with php. I tried this method its not working for me. I think my way is wrong. Kindly please explain the steps for directive to bind an event.

Rahul Sharma Over a year ago

can anyone please tell me the solution?

Collectives™ on Stack Overflow

Angular 4 JS script not working after changing route

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related