Search code examples
angularangularjs-directiveperfect-scrollbar

Angular 4 update perfect scrollbar


I'm using angular2-perfect-scrollbar in my angular4 app. I initialized it and it works fine but when I delete an item from my list the scrollbar is not updated and overflows the actual content

I tried to update it as it is described here How to call update() method of in Angular 2 Perfect Scrollbar wrapper? but it did not works.

I'm using the perfect scrollbar directive in a tbody element (the display attribute is set to block.) but that should not be the problem.

            <tbody #tableContent *ngIf ="users" [perfect-scrollbar]>

It is included in my module

import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'angular2-perfect-scrollbar';

@NgModule({ imports: [ SharedLibsModule, PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG) ],

I my component I include the container like this:

    @ViewChild('tableContent') tableContent: PerfectScrollbarDirective;

An I call the update like this:

private onSuccess(data, headers) {
    this.tableContent.update();
}

any help would be greatly appreciated.

@Edit: The scrollbar is updated and it works fine if I try to scroll on the table or If I resize the browser window.


Solution

  • It is working fine if I read the PerfectScrollbarDirective like this:

    @ViewChild('tableContent', {read: PerfectScrollbarDirective}) tableContent: PerfectScrollbarDirective;
    

    Then call the this.tableContent.update();