ngx perfect scrollbar update function undefined?

Question

This is the first time i'm trying to use perfect scroll so i might have missed something, but looking at the documentation it shows some functions that can be accessed using the directiveRef as follows

https://www.npmjs.com/package/ngx-perfect-scrollbar

following this i tried to use the update because i noticed the container wouldn't update with new items unless i resized the window so i checked the object only to find that the update function is undefined and missing from the directiveRef contrary to what is stated by the docs.

would really be thankful if anyone can shed light on this issue and point me in the right direction in case I missed anything along the way. Thank you

Looking further i can see that there are few other methods missing like `ps(), geometry(), position() etc.,`. maybe these functions added to the prototype. btw, did you try to access any of these methods ? — dreamweiver, Mar 19 '19 at 06:15
@dreamweiver yes i did. and they all work. including ngDestroy, but according to the docs it says to use the update() if the content changes, so that's where i got stuck. i've also tried creating a scrolldirective which works fine but when switching between lists without overflow and those with overflow, the ui just keeps shaking from constantly hiding and showing the scroll bar. — Rogelio, Mar 19 '19 at 06:22
usually that is how every library works, they add all the core methods to the prototype of the object, so that it can be inherited easily across application and yet keep a single copy of the same. UI Distortion issue is a deviation from the current issue, so let's close this question, you can create a new issue for that. — dreamweiver, Mar 19 '19 at 06:27
@dreamweiver ui distortion isn't the issue, that's why i opted to use ngx perfect scrollbar. The issue is updating content within component everytime the content changes, but so far it only happens when i resize the window, that's why i tried to use update() as it was recommended by the docs. So I posted the question in case someone has tried using the library and ran into a similar issue. Just looking for a solution or a better alternative. — Rogelio, Mar 19 '19 at 06:35
I understand, but this question's description was solely to know why `update()` method was not seen as a direct property of the object. so for me, the issue with `update()` not working as expected is completely new, which you havent mentioned anywhere in the question. It would be best you create a new question, else there is very less chance of getting any attention to this question as it is very different from the `HEADLINE` above. — dreamweiver, Mar 19 '19 at 06:47
@dreamweiver not just why it isn't seen and i clearly stated that the update method is undefined which already infers that it isn't working contrary to the docs. I understand how prototype work and i know that methods are shared between all instances. My question is library centric as it has the name right in the title and geared towards anyone familiar with the library or at least something similar. Like being advised to use a lower version or given an alternative. — Rogelio, Mar 19 '19 at 06:52
As a reader, i dont see it that way :) anyway good luck with that — dreamweiver, Mar 19 '19 at 07:03

score 0 · Answer 1 · answered Mar 19 '19 at 06:40

That a traditional pattern which every js library follows, all the core functionality is added to the prototype, so that any changes to the object prototype would reflect in all the objects instances.

you can find more advantages of adding methods to prototype here

Image Reference:https://hackernoon.com/understand-nodejs-javascript-object-inheritance-proto-prototype-class-9bd951700b29

score 0 · Accepted Answer · answered Mar 19 '19 at 08:11

fixed it by using https://npm.taobao.org/package/perfect-scrollbar I made a reference using Native element and then using update. like this

import PerfectScrollbar from 'perfect-scrollbar';

@ViewChild('perfectScroll') perfectScroll: ElementRef;
ps;

constructor(private psb: PerfectScrollService) {}

ngOnInit() {
    this.ps = new PerfectScrollbar(this.pScroll.nativeElement, {
      wheelSpeed: 2,
      wheelPropagation: true,
      minScrollbarLength: 20
    });
    this.psb.setBar(this.ps);
}

in my perfectScrollService I made an instance then called update everytime the content was changed

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PerfectScrollService {
  perfectScrollBar: any;
  constructor() { }

  setBar(psb) {
    this.perfectScrollBar = psb;
  }

  update() {
    this.perfectScrollBar.update();
  }

}

and then used it like this

    let newData;
    this.data[i].subscribe(
      value => (newData = value.concat(response.data[0]))
    );
    this.data$[i].next(newData);
    this.psb.update();

ngx perfect scrollbar update function undefined?

2 Answers2