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].