zefoy / ngx-perfect-scrollbar Goto Github PK

View Code? Open in Web Editor NEW

519.0 519.0 118.0 7.25 MB

Angular wrapper library for the Perfect Scrollbar

License: MIT License

HTML 14.18% CSS 19.02% TypeScript 66.80%

ngx-perfect-scrollbar's People

Contributors

Stargazers

Watchers

Forkers

sceptic sclausen merraclius craigmichaelmartin jeevandark wmaurer ywein monstrfolk celebes junnie-jobs wenlongchn agrzegorczyk bendykowski nagrock mohsenvafa suhag007 argannor ajay-sudani reyiyo ahushh panay j2l4e xuxiao415 nguyendinhbaotu srahul183 fpmk linhcao1611 akempes sandrasmietana bgxi xiechunyan laurentgoudet smile2014 criticalbh dileepunni1 ellaisys suzannamaven rdkmaster mikhailgrekov unistate chinhnguyen2905 vaisakhpradeep iwe7 kenny-ngo maneskumar codal-sbelim faleidel neryams neurosatan shay12tg dyedefra amirfawzy dana-c0914 manager01brightics andrewpaulicek thekiba demchenko94 ytlsdk ms-dosx86 brunonocetti bojibfbi4 yutao815 hhy5277 ng-power grajon yoks hiepza liangzhang pilz97 kcjonesevans limuxy heecheolman alamgirqazi jamesfeng2 covj 10229428 jpmrcado hongyu-zhuo rockwoodscientific nolikzero nazarbroslavskyi keldoc richard-ob rayrayw doxee klapik alexrunfire thegirishagarwal sajagjain kaito3desuyo serdartaylan saikathazra vunemesis asalas91 bahrianabid89 pashatkachuk grzegorz-jazurek yuriy-bezrukov jasonparallel radeveljic99

ngx-perfect-scrollbar's Issues

Unexpected value 'PerfectScrollbarModule' imported by the module '<ModuleName>'. Please add a @NgModule annotation.

I try to import the PerfectScrollbarModule in a Module (MainToolbarModule) where we use it in a component who is part of library. That scenario seems to work fine, I have a small project in that library where I can execute and load the perfect-scrollbar.

But when I try to use that library in another project (as a dependency!), I get : «Unexpected value 'PerfectScrollbarModule' imported by the module 'MainToolbarModule'. Please add a @NgModule annotation.»

Have you ever encountered this scenario?

The module where I import PerfectScrollbarModule looks like this (MainToolbarModule is exported and his other components work fine with the application):

...
import {PerfectScrollbarModule} from "ngx-perfect-scrollbar";
...

@NgModule({
    imports: [
        ...
        PerfectScrollbarModule
    ],
    schemas: [NO_ERRORS_SCHEMA],
    declarations: [
        ...
    ],
    entryComponents: [
        ...
    ],
    providers: [
        ...
    ],
    exports: [
        ...
    ],
})
export class MainToolbarModule {
}

Feature Request: Add Use as Polyfill Support

It will be great if there is a way to use ngx-perfect-scrollbar as a polyfill for browser that doesn't support custom scrollbar. May be add a polyfill property in the config object? Or you can let us(developers) do the browser support checking task and pass a boolean property to disable the scrollbar for supported browsers?

Whether there is some events like 'ps-y-reach-end' or 'ps-y-reach-start'?

Uncaught TypeError: Cannot read property 'length' of null

On a mobile device (Samsung Galaxy S7), I can touch scroll once, thereafter an exception is thrown which prevents further scrolling:

Uncaught TypeError: Cannot read property 'length' of null
    at Zone.webpackJsonp.1724.Zone._updateTaskCount (zone.js:224)
    at Zone.webpackJsonp.1724.Zone.cancelTask (zone.js:214)
    at zone.js:1575
    at clearInterval (eval at createNamedFn (zone.js:1483), <anonymous>:3:40)
    at HTMLElement.touchStart (touch.js:84)
    at ZoneDelegate.webpackJsonp.1724.ZoneDelegate.invokeTask (zone.js:363)
    at Zone.webpackJsonp.1724.Zone.runTask (zone.js:166)
    at HTMLElement.ZoneTask.invoke (zone.js:416)
webpackJsonp.1724.Zone._updateTaskCount @ zone.js:224
webpackJsonp.1724.Zone.cancelTask @ zone.js:214
(anonymous) @ zone.js:1575
clearInterval @ VM5339:3
touchStart @ touch.js:84
webpackJsonp.1724.ZoneDelegate.invokeTask @ zone.js:363
webpackJsonp.1724.Zone.runTask @ zone.js:166
ZoneTask.invoke @ zone.js:416

Using
ngx-perfect-scrollbar 2.5.0
perfect-scrollbar 0.6.16

I have no customizations to the default config, and just use the "perfect-scrollbar" directive with content too big for the screen.

As a test, if I comment out the easing loop interval created on line 125 of touch.js, the errors go away and scrolling works fine without easing.

Smooth scrollTo option

I'm using the scrollTo method in my project but the scrolling is a bit to 'instantaneous' for my usecase.

Would I be possible to add a scrollSpeed to the scrollTo method? Or should I implement that outside the perfect-scrollbar.

Is possible to use this directive on <body> tag?

My project render my components on this structure:

<body>
     <main-app>Loading...<main-app>
.
.
.
</body>

I able to apply the scrollbars into any component of .
Is any way to apply the scrollbars to the body tag? Thanks!

custom theme

Is it possible to override scrollbar theme f.e(theme example 2 from perfect-scrollbar doc)?

Disable PS on mobile/tablets

Hi!

Is it possible to disable Perfect Scroll on mobile devices? Can't get it to work properly on Iphone/Ipad (Android works) so I want to use the native scroll instead.

I am using the directive like this

<div [perfect-scrollbar]>
      //Stuff
</div>

I don't want two div tags btw, so I need a way to disable it on mobile devices.

Would like to contribute

I would like to contribute to this project but can not. I have cloned the repo, made some modifications, and try to pull the cloned repo into my app.

The .npmignore file was stopping scr and config directories from installing using npm install .

I removed them from .npmignore. Still can not get the package to install correctly from git.

Please help.

don't create new div[.ps-content]

This can cause all kinds of layout problems.

a few changes

when u`re using the router, the scrollbar does not detect the height change of the router outlet content, i ve made a few changes, and it is working ok, if u may consider adding them :

template: '<div class="inner-scroll"><ng-content></ng-content></div>',
and in the ngDoCheck function
var height = this.elementRef.nativeElement.getElementsByClassName("inner-scroll")[0].offsetHeight;

the this.elementRef.nativeElement. always has the same height even if the content has changed ,
with that inner scroll div, i get the right new height

Rename the library for less confusion when Angular 4 is released

I have decided to rename the library to ngx-perfect-scrollbar so that there is less confusion when Angular 4 is released.

Add support for auto update when hidden state changes

Any plans on Angular 4 support?

Add directive as an alternative way to use the library

Implement perfect-scrollbar directive to be able to use directive instead of a component.

Example not working in IE11 and Firefox

IE11 has a Syntax error shown in console and FF looks like this:

The scrollbar is disappeared

When I dragging the scrollbar , if mouse pointer is moved outside 'perfect-scrollbar', the scrollbar is disappeared

Build errors

build has many errors... this is my working tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./dist",
    "sourceMap": true,
    "target": "es6",
    "lib": ["dom", "es6"],
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "node"
    ],
    "exclude": [
      "node_modules",
      "../node_modules",
      "../dist"
    ]
  },
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true
  }
}

see http://blog.mgechev.com/2016/03/28/ambient-type-definitions-duplicate-identifier-typescript-fix/

also remove >/dev/null from package.json build command - its not cross platform compatible

Feature Request. Scroll Horizontally to a specific position

Could you please add a method similar to the scrollTo(position) in the directive and the component. Something along the lines of the below, this way we can scroll to specific position programmatically as well..

for the directive ->
PerfectScrollbarDirective.prototype.scrollToLeft = function (position) { this.elementRef.nativeElement.scrollLeft = position; this.update(); };

for the component ->
PerfectScrollbarComponent.prototype.scrollToLeft = function (position) { this.elementRef.nativeElement.scrollLeft = position; this.update(); };

Update container state after window resize (ChangeDetectionStrategy.OnPush)

Hi there!

There is an issue when the window is being resized.

#53

AOT not working? Any alternative please

ERROR in ./~/ngx-perfect-scrollbar/dist/lib/perfect-scrollbar.component.css
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.module.exports.pitch (C:\work\web-angular\node_modules\extract-text-webpack-plugin\loader.js:27:9)

Change the Scroll Top position of perfect scroll in angular 2

I want to update the scroll position from top when i show hide a component/div in angular 2.

I tried to this way, which did not worked.

@ViewChild('messagesContainer') messagesContainer: ElementRef;
this.messagesContainer.elementRef.nativeElement.scrollTop = 170;

Is there any update for this.

Regards

Kailash

add scroll to textarea

is there any way to add scroll to textarea? i try using directive but height is not added on ps-scrollbar-y-rail tag.

Angular 2.4.0, function calls are not supported in app.module.

Hi there,

My current setup is as in the docs meaning:

const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

Which I call in the imports:

PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)

Though after the update to Angular 2.4.0 I'm getting the following error when I'm compiling the project:

ERROR in Error encountered resolving symbol values statically. Calling function 'PerfectScrollbarModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /Projects/WebApp/src/app/app.module.ts, resolving symbol AppModule in /Projects/WebApp/src/app/app.module.ts

The project still runs though.

I tried to wrap it in an exported functions as it requests but it seems that it is no working. Any idaes on this?

Check / add support for AOT

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Application should compile with Ahead-of-time compilation

What is the current behavior?

Failed in compile time with error:
Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function

What are the steps to reproduce?

Try to run AOT using official guide

What is the use-case or motivation for changing an existing behavior?

Without that fix we cannot use that awesome library

Which versions are affected?

angular2-perfect-scrollbar - 1.0.0
@angular\core - 2.1.2
@angular\compiler-cli - 2.1.2
typescript - 2.0.8

can not make it work with latest angular 2 project built with angular cli

AoT not play well with AngularClass Starter

I'm using this starter https://github.com/AngularClass/angular2-webpack-starter
I'm trying to add this module into it and got this issue when build AoT from above starter

Error: Child compilation failed:
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (E:\Sang\Projects\angular2-webpack-starter\node_modules\extract-text-webpack-plugin\loader.js:27:9):
Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

Help Wanted! Scroll detection.

I have two scrollbars and want to be able to move them together in the left/right scroll direction.
The way I thought i would try and do this is detect the scroll event and move the other scroll bar the same way that i detected the scroll event from, if there is a better way, then please advice.

Is there a way I can detect the scroll event?

I tried detecting the scroll event by creating a directive "track-scroll" which can track scroll events, but when i add that directive on the same div which also has the perfect-scrollbar directive, the perfect-scrollbar directive fails and i get the below error:

error_handler.js:54EXCEPTION: Error in ./GanttComponent class GanttComponent - inline template:15:33 caused by: Cannot read property 'offsetWidth' of undefined
ErrorHandler.handleError @ error_handler.js:54
(anonymous) @ application_ref.js:261
ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:271
ZoneDelegate.invoke @ zone.js:241
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:56ORIGINAL EXCEPTION: Cannot read property 'offsetWidth' of undefined
ErrorHandler.handleError @ error_handler.js:56
(anonymous) @ application_ref.js:261
ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:271
ZoneDelegate.invoke @ zone.js:241
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:59ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:59
(anonymous) @ application_ref.js:261
ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:271
ZoneDelegate.invoke @ zone.js:241
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:60TypeError: Cannot read property 'offsetWidth' of undefined
at PerfectScrollbarDirective.ngDoCheck (perfect-scrollbar.directive.js:16)
at Wrapper_PerfectScrollbarDirective.ngDoCheck (/PerfectScrollbarModule/PerfectScrollbarDirective/wrapper.ngfactory.js:44)
at CompiledTemplate.proxyViewClass.View_GanttComponent0.detectChangesInternal (/AppModule/GanttComponent/component.ngfactory.js:385)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:61)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:29)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at ViewRef_.detectChanges (view_ref.js:170)
at application_ref.js:625
ErrorHandler.handleError @ error_handler.js:60
(anonymous) @ application_ref.js:261
ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:271
ZoneDelegate.invoke @ zone.js:241
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:63ERROR CONTEXT:
ErrorHandler.handleError @ error_handler.js:63
(anonymous) @ application_ref.js:261
ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:271
ZoneDelegate.invoke @ zone.js:241
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
error_handler.js:64DebugContext {_view: C…e.proxyViewClass, _nodeIndex: 21, _tplRow: 15, _tplCol: 33}
ErrorHandler.handleError @ error_handler.js:64
(anonymous) @ application_ref.js:261
ZoneDelegate.invoke @ zone.js:242
onInvoke @ ng_zone.js:271
ZoneDelegate.invoke @ zone.js:241
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
zone.js:420 Unhandled Promise rejection: Error in ./GanttComponent class GanttComponent - inline template:15:33 caused by: Cannot read property 'offsetWidth' of undefined ; Zone: ; Task: Promise.then ; Value: ViewWrappedError {__zone_symbol__error: Error: Error in ./GanttComponent class GanttComponent - inline template:15:33 caused by: Cannot read…, _nativeError: ZoneAwareError, originalError: TypeError: Cannot read property 'offsetWidth' of undefined
at PerfectScrollbarDirective.ngDoChec…, context: DebugContext, __zone_symbol__stack: "Error: Error in ./GanttComponent class GanttCompon…(http://localhost:4200/vendor.bundle.js:57165:20)"…} Error: Error in ./GanttComponent class GanttComponent - inline template:15:33 caused by: Cannot read property 'offsetWidth' of undefined
at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7012:33)
at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:26468:16)
at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:26533:16)
at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:56238:16)
at CompiledTemplate.proxyViewClass.DebugAppView.rethrowWithContext (http://localhost:4200/vendor.bundle.js:77328:23)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:77301:18)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:77088:18)
at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:61:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:77103:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:77298:44)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:77088:18)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:29:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:77103:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:77298:44)
at ViewRef.detectChanges (http://localhost:4200/vendor.bundle.js:57165:20)
consoleError @ zone.js:420
_loop_1 @ zone.js:449
drainMicroTaskQueue @ zone.js:453
zone.js:422 ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error: Error in ./GanttComponent class GanttComponent - inline templat…, rejection: ViewWrappedError, promise: ZoneAwarePromise, zone: Zone, task: ZoneTask}
consoleError @ zone.js:422
_loop_1 @ zone.js:449
drainMicroTaskQueue @ zone.js:453
error_handler.js:54 EXCEPTION: Cannot read property 'forEach' of undefined
ErrorHandler.handleError @ error_handler.js:54
next @ application_ref.js:348
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
data.args.(anonymous function) @ zone.js:1376
error_handler.js:59 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:59
next @ application_ref.js:348
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
data.args.(anonymous function) @ zone.js:1376
error_handler.js:60 TypeError: Cannot read property 'forEach' of undefined
at http://localhost:4200/main.bundle.js:4880:35
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:6476:35)
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:28119:37)
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:6475:40)
at Zone.runTask (http://localhost:4200/polyfills.bundle.js:6352:47)
at ZoneTask.invoke (http://localhost:4200/polyfills.bundle.js:6546:33)
at data.args.(anonymous function) (http://localhost:4200/polyfills.bundle.js:7577:25)
ErrorHandler.handleError @ error_handler.js:60
next @ application_ref.js:348
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
data.args.(anonymous function) @ zone.js:1376
Subscriber.js:227 Uncaught TypeError: Cannot read property 'forEach' of undefined
at http://localhost:4200/main.bundle.js:4880:35
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:6476:35)
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:28119:37)
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:6475:40)
at Zone.runTask (http://localhost:4200/polyfills.bundle.js:6352:47)
at ZoneTask.invoke (http://localhost:4200/polyfills.bundle.js:6546:33)
at data.args.(anonymous function) (http://localhost:4200/polyfills.bundle.js:7577:25)
(anonymous) @ gantt.component.ts:51
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ ng_zone.js:262
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
ZoneTask.invoke @ zone.js:345
data.args.(anonymous function) @ zone.js:1376

add `display: block` to the component :host element

add display: block to the component :host css.

How to use perfect scrollbar methods

Hi,
I want to call Ps.update(container); when active route changes. But how to call these impeded methods from my component ? Is there any service I could inject to my component and call these methods ?
thanks

Add AOT build option for the example app

How to make scrollbar start from bottom?

Hi, can you help me? Is it possible to make the scroll bar starts at the bottom? I'm trying to create a chat application, and I want that all the new messages are added at the bottom, so I need to make scroll bar start at the bottom. How do I make it?

Thank You in Advance.

Unable to use PerfectScrollbarModule.forRoot() under the submodules with Lazy-loading.

While I imported under the SharedModule, it said following issues.

ERROR Error: Uncaught (in promise): Error: 
      Application called PerfectScrollbarModule.forRoot() twice.
      For submodules use PerfectScrollbarModule.forChild() instead.

Any solution to avoid this?
Regards

Why scrollbar is also exist?

when the content that is in 'perfect-scrollbar' is just one column, but scrollbar is also exist? Can not hidden scrollbar in that case? the ngx-perfect-scrollbar demo is also like that.

How to make a scrollto?

Hello,

I'm trying to scrollto an item in the scrollbar container but it does not work. I tried with different other modules like:

With the original perfect-scrollbar it seems to be possible.

Can you help me. Thank you

AOT compilation error with PerfectScrollbarModule.forRoot

I got the following error when I start ng serve (angular cli v beta.24) with the perfect scroll bar

ERROR in Error encountered resolving symbol values statically. Calling function 'PerfectScrollbarModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in myapp/src/app/app.module.ts, resolving symbol AppModule in myapp/src/app/app.module.ts

I've already had the same problem with other lib (ng2-translate for instance) but upgrading to the laster version resolved the problem...

Could you fix this also for the perfectscrollbar?

Thanks

Cant use directive in a sub component

##Thte title says it all. In my app, i have the perfect scrollbar module imported and declared in my layout.module.ts :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { MaterialModule } from '@angular/material';

import { LayoutRoutingModule } from './layout-routing.module';
import { LayoutComponent } from './layout.component';
import { HeaderComponent, SidebarComponent, SidenavComponent, HamburgerComponent, } from '../shared';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({
    imports: [
        CommonModule,
        NgbDropdownModule.forRoot(),
        MaterialModule,
        PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
        LayoutRoutingModule,
    ],
    declarations: [
        LayoutComponent,
        HeaderComponent,
        SidebarComponent,
        SidenavComponent,
        HamburgerComponent,
    ]
})
export class LayoutModule { }

it works perfectly when i call it from layout.component.ts. However when i try using the directive in a child component, let's say user-profile.ts, an error tells me that [perfect-scrollbar] is not a known element. If i try importing the PS module again in my submodule or subcomponent, i also get errors. Iam probably doing something wrong, anyone could help me figure it out ?

Error loading Perfect Scrollbar on Angular 4

Hi my friend thanks for your hard work.

I try to install this on my project but i have an error:

GET http://localhost:8000/ngx-perfect-scrollbar 404 (Not Found) zone.js:1561

So i add this to my systemjs.config.js file:

'ngx-perfect-scrollbar': 'npm:ngx-perfect-scrollbar/bundles/ngx-perfect-scrollbar.umd.min.js'

I put on my component this:

<div class="sidebar-wrapper" [perfect-scrollbar]>
    <div class="logo logo-dashboard-normal">
        <div class="logo-img">
...

And now i have this error:

Here is my config on app.module.ts file:

... [SOME OTHER LIBS]
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

export const routes: Route[] =[
    { path: 'unauthorized', children: [{ path: 'unauthorized', component: UnauthorizedComponent }] }
]

@NgModule({
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
        DashboardModule,
        SidebarModule,
        NavbarModule,
        FooterModule,
        HttpModule,
        AuthModule,
        RouterModule.forRoot(routes),
        PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)
    ],
[SOME OTHER STATEMENTS ...]

What i'm doing wrong? The config on my systemjs.config.js are ok? Thanks.

How to use in a lazy loaded module?

Can't use it in an lazy loaded module, since it's not allowed to put PerfectScrollbarModule in a SharedModule and if I import it in the AppModule, the element perfect-scrollbar isn't a known element.

Refactor component to use the directive

Unexpected token

I am trying to use this in my ng2 app but when I add "PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)" into my NgModule imports it throws below exception. If i remove this from import app works fine.

(index):72 Error: (SystemJS) Unexpected token <
SyntaxError: Unexpected token <
at eval ()
at Object.eval (localhost:52432/app/app.module.js:23:36)
at eval (localhost:52432/app/app.module.js:49:4)
at eval (localhost:52432/app/app.module.js:50:3)
Evaluating localhost:52432/angular2-perfect-scrollbar
Evaluating localhost:52432/app/app.module.js
Evaluating localhost:52432/app/main.js
Error loading localhost:52432/app/main.js
at eval ()
at Object.eval localhost:52432/app/app.module.js:23:36)
at eval (localhost:52432/app/app.module.js:49:4)
at eval (localhost:52432/app/app.module.js:50:3)
Evaluating localhost:52432/angular2-perfect-scrollbar
Evaluating localhost:52432/app/app.module.js
Evaluating localhost:52432/app/main.js
Error loading localhost:52432/app/main.js

Could you please help me identifying the issue.

Thanks

Manual update refresh issue

if i m trying to update scroller manually i.e. calling update method , it doesn't refresh handle bar width automatically.
I need to click on scrollbar handle to update its correct length.

can you give example how to use MutationObserver to call update method?

i am using Ng2 with typescript.

thanks
hardev

config handlers not working in ie edge

<perfect-scrollbar [config]="{handlers: ['click-rail', 'drag-scrollbar', 'wheel', 'touch']}" class="pipeline-workspace" rpNodeDroppable>

I can still use the keyboard keys in IE edge v14. Chrome works fine :(

Doesn't work in FF 49.0.2

Seems this doesn't work in FF for me
There is no errors or something. (All perfect in Chrome)

Dynamic options

First of all, thanks for a great and so useful library @sconix

I am trying to add settings dynamically - setting supressScrollY based on a constant. It looks like this:

<perfect-scrollbar  class="flex-item-elastic container" [config]="{suppressScrollY: !isWidget}">
    <router-outlet></router-outlet>
</perfect-scrollbar>

Though the constant changes, the config doesn't seem to take effect. I've also tried using a method call (suppressScrollY: disableYScroll()) - also without any effect, the method gets called though.

Any ideas how to achieve the desired effect?

Thanks a lot