Not a Propaganda Machine

    overlayscrollbars-ngx
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.3 • Public • Published

    Angular OverlayScrollbars

    Angular OverlayScrollbars Downloads License

    Example   •   Documentation   •   FAQ

    The official OverlayScrollbars wrapper for Angular.

    Installation

    npm install overlayscrollbars-ngx

    Peer Dependencies

    OverlayScrollbars for Angular has the following peer dependencies:

    npm install overlayscrollbars
    
    npm install @angular/core
    

    TypeScript

    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 "overlayscrollbars-ngx";
    
    @NgModule({
      imports: [OverlayscrollbarsModule],
    })
    export class AppModule {}

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

    import { OverlayScrollbarsComponent } from "overlayscrollbars-ngx";

    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):

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

    npm run setup
    npm run build
    npm run example

    License

    MIT

    Install

    npm i overlayscrollbars-ngx

    DownloadsWeekly Downloads

    2,186

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    34.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • kingsora