Angular 9 compatible version of overlayscrollbars-ngx

Installation

npm install ngx-overlayscrollbars

Peer Dependencies

OverlayScrollbars for Angular has the following peer dependencies:

• The vanilla JavaScript library: overlayscrollbars

npm install overlayscrollbars

• The Angular framework: @angular/core

npm install @angular/core

TypeScript

• In case you are using TypeScript, you have to install the OverlayScrollbars typings:

npm install @types/overlayscrollbars

Since this wrapper is written in TypeScript it comes with its generated typings. Check out the recommended tsconfig.json options.

Usage

CSS

You have to import the OverlayScrollbars.css by yourself. The component doesn't do it for you as the styles are global styles! There are different ways to achieve this, in Angular the most simple way for me was to add this line in the styles file:

@import '~overlayscrollbars/css/OverlayScrollbars.css';

Import

First you need to import the module into your modules file:

import { NgModule } from '@angular/core';
import { OverlayscrollbarsModule } from 'ngx-overlayscrollbars';

@NgModule({
  imports: [ OverlayscrollbarsModule ]
})
export class AppModule { }

After that you can import the component into your file(s):

import { OverlayScrollbarsComponent } from 'ngx-overlayscrollbars';

Template

After the import you can use it in templates like:

<overlay-scrollbars>
  example content
</overlay-scrollbars>

Properties

Two properties are accepted: options and extensions.

• The options property accepts a object and can be changed at any point in time, and the plugin will adapt.
• The extensions property accepts a string, string array or object and is only taken into account if the component gets mounted.

<overlay-scrollbars
  [options]="{ scrollbars: { autoHide: 'scroll' } }"
  [extensions]="['extensionA', 'extensionB']"
>
</overlay-scrollbars>

You can read more about the options object here, extensions are documented here and here.

Instance

If you get the component reference, it provides two methods: osInstance() and osTarget().

• The osInstance() method returns the OverlayScrollbars instance of the component, or null if the instance isn't initialized yet or already destroyed.
• The osTarget() method returns the native html element to which the plugin was initialized, or null if the the component isn't mounted yet or already unmounted.

Example App

In case you need a example app for reference, you can use the example app in this repo(example folder):

• Live example
• Source code

If you wanna build the example app, run these commands:

npm run setup
npm run build
npm run example

License

MIT