Simplebar: SimpleBar freezes in Angular 4

[ParadiseCircus]

I'm importing SimpleBar through modules as follows:

import * as SimpleBar from 'simplebar';

If I try to initialize it programatically the application freezes:

this.myScroll = new SimpleBar(document.getElementById('pageScroll'));

Is there a way to retrieve simplebar after it has been initialized like this?

<div id="pageScroll" data-simplebar></div>

[catchshyam]

In your component's ngAfterViewInit, do the following,

//ngZone is the injected NGZone service
this.ngZone.runOutsideAngular(() => {
    setTimeout(() => {
            //this.simpleBar is the ElementRef of simplebar element retrived via @ViewChild
            const scrollBar = new SimpleBar(this.simpleBar.nativeElement);
            //assuming you want to add a listener
            scrollBar.getScrollElement().addEventListener('scroll', (event) => {
                   //do your thing
            });
     });
});

[ParadiseCircus]

This worked thanks a lot!