Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
ngx-sortable
Advanced tools
Readme
ngx-sortable
an angular 4 and above component for sorting list supporting drag and drop sort.
npm install ngx-sortable
NgxSortableModule
into your app.module;import { NgxSortableModule } from 'ngx-sortable'
NgxSortableModule
to the imports of your NgModule:@NgModule({
imports: [
...,
NgxSortableModule
],
...
})
class YourModule { ... }
<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>
v2.0.0
onwards use below <ngx-sortable [items]="items" [name]="'List'" (listSorted)="listOrderChanged($event)">
<ng-template let-item="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
Notice the difference in accessing the
item
in above two examples. Also fromv2.0.0
onwards index of the item is also available in the template similar tolet-item="item"
uselet-i="index"
andi
will be the index variable available in the template.
items: any[]
- array of list items.name: string
- List name that will be shown in the header.listStyle: any
- list styles such as height, width
.showHeader: boolean
- flag to hide / show header default is trueremoveOnDropOutside: boolean
- flag to enable remove items by dragging and dropping them outside the list. Default is falsearrowKeySort: boolean
- flag to enable sort using keyboard arrow keys. Example: Ctrl + ArrowDown moves item downcommandKey: CommandKey
- key type to use along with arrow keys for sorting e.g. ctrlKey/altKey. Default is ctrlKeyenum CommandKey {
CtrlKey = "ctrlKey",
ShiftKey = "shiftKey",
Altkey = "altKey",
MetaKey = "metaKey",
}
listStyle = {
width:'300px', //width of the list defaults to 300
height: '250px', //height of the list defaults to 250
}
listSorted($event): Event
- when list is sorted emits listSorted event with updated orderWhere
$event
is the sorted list
dragStart($event): Event
- emitted when an item is seleceted and starts draggingWhere
$event:{ event: Javascript event, itemIndex: current item index, newIndex: -1, item: selected item}
dropped($event): Event
- emitted when an item is dropped at the new indexWhere
$event:{ event: Javascript event, itemIndex: current item index, newIndex: new item index, item: selected item}
moveDown($event): Event
- emitted when an item is moved down in the list using the sort arrowsWhere
$event:{ itemIndex: current item index, newIndex: new item index, item: selected item}
moveUp($event): Event
- emitted when an item is moved up in the list using sort arrowsWhere
$event:{ itemIndex: current item index, newIndex: new item index, item: selected item}
remove($event): Event
- emitted when an item is removed from the list by dropping out, only works when removeOnDropOutside
is set to trueWhere
$event:{ itemIndex: current item index, item: selected item}
Found a bug or an issue with this? Open a new issue here on GitHub.
Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.
FAQs
An angular 4 and above component for sorting list supporting drag and drop sort.
We found that ngx-sortable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.