ngx-perfect-scrollbar: How to reference to the directive from typescript?

Question

I'm using ngx-perfect-scrollbar with my Angular 5 project. I want to scroll the div to top when the route changes.

dashboard.html

<div class="main-panel" [perfectScrollbar] #perfectscroll>
    <router-outlet></router-outlet>
</div>

dashboard.ts

@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnInit {
    @ViewChild('perfectscroll') perfectscroll: PerfectScrollbarDirective;

    ngOnInit() {
        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            this.perfectscroll.scrollToTop()
        });
    }
}

But I get this error :

TypeError: _this.perfectscroll.scrollToTop is not a function

Answer 1

Look at my working example.

In the trmplate:

<div class="perfectScroll" [perfectScrollbar] #psLeft="ngxPerfectScrollbar">...</div>
...
<div class="perfectScroll" [perfectScrollbar] #psRight="ngxPerfectScrollbar">...</div>

...

In the component:

@ViewChild('psLeft') psLeft: PerfectScrollbarDirective;
@ViewChild('psRight') psRight: PerfectScrollbarDirective;
...
if (this.psRight) {
    this.psRight.scrollToTop();
}

Answer 2

just use this: @ViewChild(PerfectScrollbarDirective) perfectscroll: PerfectScrollbarDirective;

you will have instance and then you can call functions like scrollToTop()