angularangular8simplebar

`simplebar` not works, how to integrate with angular


my appcomponent.ts:

import { Component } from '@angular/core';
import 'simplebar';
import 'simplebar/dist/simplebar.css';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
}

html:

<div class="container" data-simplebar id="content">
  <div class="big-width">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus nobis similique, temporibus eaque eum vel adipisci sed harum obcaecati animi praesentium consequatur sint consectetur iure accusantium explicabo voluptate perspiciatis nemo.
  </div>
</div>

Looking to integrate both vertical and horizontal but not works. what should be added further?

any one help me?

Live Demo


Solution

  • 1) First install npm install simplebar --save

    2) In polyfills.ts add this: import 'simplebar;

    3) then in main style.scss file add this: @import '~simplebar/dist/simplebar.css';

    4) add data-simplebar attribute to which element you want to be scrolled with this theme.