JavaScript SlimScroll usage in Angular page?

Question

I am trying to use SlimScroll in an Angular page as shown below:

First I added the js file to angular.json:

"scripts": [
  "src/bower_components/jquery/dist/jquery.min.js",
  "src/bower_components/bootstrap/dist/js/bootstrap.min.js",
  "src/bower_components/jquery-slimscroll/jquery.slimscroll.js",
]

Then I try to call the related method in html as shown below:

<div class="example">
  
</div>
  

<script type="text/javascript">
  $(function(){
    $(".example").slimScroll({
      size: '4px', 
      width: '100%', 
      height: '100%', 
      color: '#ff4800', 
      allowPageScroll: true, 
      alwaysVisible: true     
    });
  });
</script>

But there is nothing on the page. What I am doing wrong?

Answer 1

You need to put the slimscroll constructor code inside an ngOnInit. Whether it be for a specific *.component.ts or inside the app.component.ts.

ngOnInit(){
$(function(){
    $(".example").slimScroll({
      size: '4px', 
      width: '100%', 
      height: '100%', 
      color: '#ff4800', 
      allowPageScroll: true, 
      alwaysVisible: true     
    });
  });
}

The ngOnInit is invoked after the component's html is injected into the page.