Angular2 Drag to Scroll

Lightweight drag to scroll directive for Angular2

Scroll on drag!

Try out the demo!

Install

You can get it on npm.

npm install angular2-drag-scroll --save

Setup

You'll need to add DragScrollModule to your application module.

import{DragScrollModule}from'angular2-drag-scroll';
...
@NgModule({declarations: [AppComponent],imports: [DragScrollModule,
...
],providers: [],bootstrap: [AppComponent]})exportclassAppModule{}

Add the drag-scroll attribute to a scrollable element:

@Component({selector: 'sample',template:` <div drag-scroll> Big text goes here... </div> `})classSample{}

That's it! Now you can scroll it by dragging.

API REFERENCE

Name	Type	Description	Default
scrollbar-hidden	@Input	Whether the scroll bar for this element is hidden.	false
drag-scroll-disabled	@Input	Whether all draging and scrolling events is disabled.	false
drag-scroll-x-disabled	@Input	Whether horizontally dragging and scrolling events is disabled.	false
drag-scroll-y-disabled	@Input	Whether vertically dragging and scrolling events is disabled.	false
drag-disabled	@Input	Whether draging is disabled.	false

---

Add navigation button

@Component({selector: 'sample',template:` <div drag-scroll #nav> Big text goes here... </div> <button (click)="moveLeft()">Left</button> <button (click)="moveRight()">Right</button> `})classSample{
@ViewChild('nav',{read: DragScroll})ds: DragScroll;moveLeft(){this.ds.moveLeft();}moveRight(){this.ds.moveRight();}}

Dynamically apply the plugin to a DOM element

This was brought by @tommykamkcm. The below code block demonstrates how to attach the directive dynamically on a DOM i.e. deep rendered element.

constructor(privatecdr: ChangeDetectorRef,privateelement: ElementRef,privaterenderer: Renderer){}
dragScrollDom: any;
dragScrollRef: ElementRef;
dragScroll: DragScroll;ngAfterViewInit(){// attach to .nav-tabs elementthis.dragScrollDom=this.element.nativeElement.querySelector('.nav-tabs');this.dragScrollRef=newElementRef(this.dragScrollDom);this.dragScroll=newDragScroll(this.dragScrollRef,this.renderer,this.cdr);this.dragScroll.attach({disabled: false,scrollbarHidden: true,yDisabled: true,xDisabled: false,});}

Contributing

Clone the repository, and run npm install, npm start. The demo app will starts on port :4200. I usually do my development on the demo app.

I'll accept pretty much everything so feel free to open a Pull-Request

License

MIT