Simplebar: Can't Import simple bar into Angular7 Application

[ghost]

I use a UI Tempalte for my project, which uses Simplebar.
Sadly I can't get it to work, due to SimpleBar not being importable, is this a known issue?
Any idea on how I can fix this?
I already tried using a old version, but that doesn't work either.

[Grsmto]

We need more context to help you. This is not a known issue.
Here is a Code Sandbox with Angular 7 loaded, can you provide an example of the issue from this? https://codesandbox.io/s/6y8rvvz3rz

I don't use Angular so I don't know how to set it up.

[serkon]

Hi,

1. First install npm install simplebar --save
2. Add polyfills.ts this: import 'simplebar;
3. then add main style.scss file this: @import '~simplebar/dist/simplebar.css';
4. add data-simplebar attribute to which element you want to be scrolled with this theme. For example: <div class='container' data-simplebar>

But;

if you want to call programmatically this scroll in a component, you have to add to component import SimpleBar from 'simplebar'; then you can call in function:

ngAfterViewInit(){
  const simpleBar = new SimpleBar(elementRef.nativeElement);
}

[qiurenbo]

Hi, I make a wrapper for Angular. So you can use it in any component:

Installation

npm i simplebar
npm i simplebar-angular

Usage

Import module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SimplebarAngularModule } from 'simplebar-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SimplebarAngularModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Use component

<div class="container">
  <ngx-simplebar [options]="options">
    <div *ngFor="let number of numbers">ngx-simplebar</div>
  </ngx-simplebar>
</div>

You can click here to see the demo.

[Grsmto]

Closing this since we now have an Angular plugin. Thanks @qiurenbo !