Using Callbacks with Ng Custom functions

[alexsalmon]

I'm trying to use the onTotalScroll callback to trigger a function in the component, which would "lazy load" more items into the scroll box:

ngOnInit() {
  this.scrollbarOptions = {
  axis: 'y',
  scrollButtons: {enable: false},
  scrollInertia: 250,
  theme: 'content-cloud',
  callbacks:{
    onTotalScroll: function() {
      console.log("End of Scroll");
      this.loadMore();
    }
  }
};

loadMore() {
  console.log("Loading more!");
};

However, the function loadMore() can't be found:

EXCEPTION: this.loadMore is not a function

I'm unsure about the best way to do this, because the function is trying to be called inside the callback inside the scrollbarOptions.

Any help is much appreciated!

[jfcere]

Hi @alexsalmon,

You will need to use an Arrow function for the callback to be correctly aware of the context in which the loadMore function is declared.

So basically, changing onTotalScroll: function() {...} for onTotalScroll: () => {...} would do the trick.

ngOnInit() {
  this.scrollbarOptions = {
  axis: 'y',
  scrollButtons: {enable: false},
  scrollInertia: 250,
  theme: 'content-cloud',
  callbacks:{
-    onTotalScroll: function() {
+    onTotalScroll: () => {
      console.log("End of Scroll");
      this.loadMore();
    }
  }
};

loadMore() {
  console.log("Loading more!");
};

Happy to help :)

[alexsalmon]

Works great! Thank you for your quick reply!