# angular-drag-scroll-light

> Lightweight drag to scroll directive for Angular

Latest version **1.0.1** (published 2017-10-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-drag-scroll-light
pnpm add angular-drag-scroll-light
yarn add angular-drag-scroll-light
bun add angular-drag-scroll-light
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-10-15 |
| First published | 2017-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Denis Chudinov |
| Maintainers | dddeeennn |
| Keywords | Angular 2, Angular 4, Angular, drag, scroll |

## Links

- npm: https://www.npmjs.com/package/angular-drag-scroll-light
- Repository: https://github.com/dddeeennn/angular2-drag-scroll
- Homepage: https://github.com/dddeeennn/angular2-drag-scroll#readme
- Issues: https://github.com/dddeeennn/angular2-drag-scroll
- npm.io page: https://npm.io/package/angular-drag-scroll-light

## Recent versions

- 1.0.1 (latest) — 2017-10-15
- 1.0.0 — 2017-09-01

## README

# [Angular2 Drag to Scroll](https://bfwg.github.io/angular2-drag-scroll/)

Lightweight drag to scroll directive for Angular2

[![npm version](https://img.shields.io/npm/v/angular2-drag-scroll.svg)](https://www.npmjs.com/package/angular2-drag-scroll)
[![Build Status](https://travis-ci.org/bfwg/angular2-drag-scroll.svg?branch=master)](https://travis-ci.org/bfwg/angular2-drag-scroll)
[![License MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/bfwg/angular2-drag-scroll/blob/master/LICENSE)

*Scroll on drag!*

![Scroll](https://raw.githubusercontent.com/bfwg/angular2-drag-scroll/master/demo/assets/img/Wp03zyitgY.gif)

Try out the [demo](https://bfwg.github.io/angular2-drag-scroll/)!

# Install

You can get it on npm.

```shell
npm install angular2-drag-scroll --save
```

# Setup

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

```typescript
import { DragScrollModule } from 'angular2-drag-scroll';
...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    DragScrollModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {
}

```
Add the `drag-scroll` attribute to a scrollable element:
```typescript
@Component({
  selector: 'sample',
  template:`
  <div drag-scroll>
    Big text goes here...
  </div>
  `
})
class Sample {}
```
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-scroll-nav        | @Input  | Whether show the navigation buttons.                                          | false |

___

## 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.
```javascript
dragScrollDom: any;
dragScrollRef: ElementRef;
dragScroll: DragScroll;

ngAfterViewInit() {
  // attach to .nav-tabs element
  this.dragScrollDom = this.element.nativeElement.querySelector('.nav-tabs');
  this.dragScrollRef = new ElementRef(this.dragScrollDom );

  this.dragScroll = new DragScroll(this.dragScrollRef, this.renderer);
  this.dragScroll.attach({
    disabled: false,
    scrollbarHidden: true,
    yDisabled: true,
    xDisabled: false,
    nav: 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](/LICENSE)

---
_Source: https://npm.io/package/angular-drag-scroll-light · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._