ngx-sortlist v1.0.15

ngx-sortlist

ngx-sortlist is a component lib to create a tree list with sorting by buttons up/down.

Install

To use ngx-sortlist in your project install it via npm:

npm i ngx-sortlist --save

How to use

Use component with:

<lib-ngx-sortlist 
[list]="someList" 
[propName]="'name'" 
[propId]="'id'" 
[children]="'children'" 
[upBtn]="upBtnStr" 
[downBtn]="downBtnStr" 
[selectedId]="-1"
(listChanged)="getList($event)"
(selectedItemId)="onSelect($event)">
</lib-ngx-sortlist>

where someList - array for your list, for example

someList = [
	{ id: 0, name: '1', children: [] },
	{ id: 1, name: '2', children: [] },
	{ id: 2, name: '3', children: [] },
	{
		id: 3, name: '4', children: [
			{ id: 5, name: 0, children: [] },
			{ id: 6, name: 0, children: [] },
			{
				id: 7, name: 0, children: [
					{ id: 10, name: 1, children: [] },
					{ id: 11, name: 1, children: [] },
					{ id: 12, name: 1, children: [] },
					{ id: 13, name: 1, children: [] }
				]
			},
			{ id: 8, name: 0, children: [] },
			{ id: 9, name: 0, children: [] }
		]
	},
	{ id: 4, name: '5', children: [] }
];

upBtn/downBtn - html for buttons up and down. selectedId - id, whitch is default selected listChanged - event send you new array with new order selectedItemId - event send you id of selected item

Styling

.ngx-sortlist {
}
.ngx-sortlist .sl-content {
}
.ngx-sortlist .sl-title {
}
.ngx-sortlist .sl-title .sl-nav {
}
.ngx-sortlist .sl-title .sl-nav .btn {
}
.ngx-sortlist .sl-title .sl-nav .first {
}
.ngx-sortlist .sl-title .sl-nav .last {
}
.ngx-sortlist .sl-title .sl-name {
}
.ngx-sortlist .selected {
}