ngx-sortable-2
v1.0.1
Published
An angular 4 and above component for sorting list supporting drag and drop sort.
Downloads
49
Maintainers
Readme
ngx-sortable
ngx-sortable
an angular 4 and above component for sorting list supporting drag and drop sort.
Features
- Custom template
- Customizable
- Drag and drop sorting
Examples
Installation
npm install ngx-sortable
Using with webpack and tsc builds/ angular-cli builds
- import
NgxSortableModule
into your app.module;
import { NgxSortableModule } from 'ngx-sortable'
- add
NgxSortableModule
to the imports of your NgModule:
@NgModule({
imports: [
...,
NgxSortableModule
],
...
})
class YourModule { ... }
- use
<ngx-sortable></ngx-sortable>
in your templates to add sortable list in your view
<ngx-sortable [items]="items" [name]="'List'" (listSorted)="listOrderChanged($event)">
<ng-template let-item>
<div class="sortable-list-item">
{{item}}
</div>
</ng-template>
</ngx-sortable>
Where content inside
<ng-template> </ng-template>
is the template that will be used for displaying list items. Also the class can be named accordingly this is just an example. Create a class and add it to your root style.css
Config
Input
items: any[]
- array of list items.name: string
- List name that will be shown in the header.listStyle: any
- list styles such asheight, width
.
listStyle = {
width:'300px', //width of the list defaults to 300
height: '250px', //height of the list defaults to 250
}
Output
listSorted($event): Event
- when list is sorted emits listSorted event with updated order
Where
$event
is the sorted list
Help Improve
Found a bug or an issue with this? Open a new issue here on GitHub.
Contributing to this project
Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.