How to call update() method of in Angular 2 Perfect Scrollbar wrapper?

Question

I try to implement Perfect Scrollbar to my Angular 2 Application and use Angular 2 Perfect Scrollbar wrapper: https://github.com/zefoy/angular2-perfect-scrollbar If i have large content at application start moment my scrollbar appears and works normally. But if my content grows dynamically - scrollbar is not appear. I think I have to call the update() method of Scrollbar object when content is added. How can i call Perfect Scrollbar methods from Angular 2 components?

Answer 1

One can do it like this. First, insert perfect-scrollbar selector and give it a custom ID inside an HTML template:

<perfect-scrollbar #scroll1 class="container">
   <div class="dynamic-content"></div>
</perfect-scrollbar>

Then in the typescript file refer to this element using defined ID and assign its type:

@ViewChild('scroll1') scroll1: PerfectScrollbarComponent;

Finally, call update() method through directiveRef property of the Perfect Scrollbar component inside whatever method in the same file:

yourMethod() {
   this.scroll1.directiveRef.update();
}