Perfect Scrollbar not working in Angular

Question

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)
    ],
    ...
})

Answer 1

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

Answer 2

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.