CODEWITHSUNDEEP
angularperfect-scrollbar
Bryan
Bryan

Reputation: 3009

Perfect Scrollbar not working in Angular

I'm trying to add a styled scrollbar to my Angular application using the following library: https://github.com/zefoy/ngx-perfect-scrollbar

I followed the documentation in that link and added the imports to my app.module.ts file, but I keep getting errors when trying to use it.

I also tried importing PerfectScrollbarModule and PerfectScrollbarConfigInterface to the component I'm using it in, but still no luck.

I tried all of the following HTML, but they resulted in the corresponding error messages. What am I missing? By the way, I'm on the most recent version of Angular.

<perfect-scrollbar class="container" [config]="config">
  <div class="content">Scrollable content</div>
</perfect-scrollbar>

Can't bind to 'config' since it isn't a known property of 'perfect-scrollbar'.

<perfect-scrollbar class="container">
  <div class="content">Scrollable content</div>
</perfect-scrollbar>

'perfect-scrollbar' is not a known element:

<div [perfect-scrollbar]="config">
    ...
</div

Can't bind to 'perfect-scrollbar' since it isn't a known property of 'div'

UPDATE:

I added ngx-perfect-scrollbar': 'npm:ngx-perfect-scrollbar' to the map object is my systemjs file and the following to the packages object:

'ngx-perfect-scrollbar': {
    main: 'bundles/ngx-perfect-scrollbar.umd.js',
    defaultExtension: 'js'
  }

Here are the relevant parts of my app.module.ts file:

import { PerfectScrollbarModule }          from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

export const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({ 
    imports: [        
        ...
        PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)
    ],
    ...
})

Upvotes: 7

Views: 24962

Answers (4)

Anchal Sharma
Anchal Sharma

Reputation: 41

This worked for me npm install ngx-perfect-scrollbar --save-dev

Upvotes: 0

zivc
zivc

Reputation: 353

For anyone else looking for an answer to this, the problem is because the directive attribute has been changed from [perfect-scrollbar] to [perfectScrollbar].

Upvotes: 8

Kodiak
Kodiak

Reputation: 5978

If the component where you want to use the perfect scrollbar depends on another module than app.module (for instance header.module...), you should also import PerfectScrollbarModule in this submodule. You can do it the exact same way you did in your app.module.

Upvotes: 5

Bilal Ahmed
Bilal Ahmed

Reputation: 381

First of all, did you install it correctly? I mean did you run this command? npm install ngx-perfect-scrollbar --save-dev, If no, then you should do it first to be able to play with that library.

Upvotes: 2

Related Questions