Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@gmerabishvili/ngx-picklist
Advanced tools
Readme
ngx-picklist is used to reorder items between different lists. Items can be reordered using control buttons and drag and drop.
ngx-picklist uses @angular/cdk's DragDropModule: npm i @angular/cdk
ngx-picklist
:npm i ngx-picklist
import {NgxPicklistModule} from '@gmerabishvili/ngx-picklist';
@NgModule({
declarations: [AppComponent],
imports: [NgxPicklistModule],
bootstrap: [AppComponent]
})
export class AppModule {}
<ngx-picklist
[source]="sourceBooks"
[target]="targetBooks"
[itemTemplate]="itemTemplate"
[sourceHeaderTemplate]="sourceHeaderTemplate"
[targetHeaderTemplate]="targetHeaderTemplate"
(movedToTarget)="onMoveToTarget($event)"
(movedToSource)="onMoveToSource($event)">
<ng-template #sourceHeaderTemplate>
<h3 class="title">Available</h3>
</ng-template>
<ng-template #targetHeaderTemplate>
<h3 class="title">Selected</h3>
</ng-template>
<ng-template #itemTemplate let-item>
<div class="item">
<div class="image-container">
<img src="assets/images/{{item.image}}" [alt]="item.name" class="image"/>
</div>
<div class="item-detail">
<h4>{{item.name}}</h4>
<span class="text">{{item.category}}</span>
</div>
<div class="item-description">
<h5>${{item.price}}</h5>
<span class="text">{{item.description}}</span>
</div>
</div>
</ng-template>
</ngx-picklist>
class TestComponent {
sourceBooks: any[] = [
{
id: 1,
name: "Design Patterns",
description: "Book Description",
image: "design-patterns.jpg",
category: "Programming",
price: 99
},
{
id: 2,
name: "Eloquent Javascript",
description: "Book Description",
image: "eloquent-javascript.jpg",
category: "Programming",
price: 150
},
{
id: 3,
name: "Javascript Ninja",
description: "Book Description",
image: "javascript-ninja.jpg",
category: "Programming",
price: 250
}
];
targetBooks: any[] = []
onMoveToTarget(event: any) {
// console.log(event);
}
onMoveToSource(event: any) {
// console.log(event);
}
}
Input | Type | Default | Required | Description |
---|---|---|---|---|
[source] | Array<any> | [] | yes | An array of objects for the source list. |
[target] | Array<any> | [] | yes | An array of objects for the target list. |
showControls | boolean | true | no | Whether to show control buttons. |
showResetControl | boolean | false | no | Whether to show reset control button. It is hidden by default. |
styleClass | string | - | no | Style class of the component. |
disabled | boolean | false | no | When present, it specifies that the component should be disabled. |
dragdropDisabled | boolean | false | no | When present, it specifies that the Drag and Drop should be disabled. |
trackBy | (index: number, item: any) => item | Function | no | Function to optimize the DOM operations by delegating to ngForTrackBy, default algorithm checks for object identity. |
sourceHeaderTemplate | TemplateRef<any> | null | no | Custom header template of source list. |
targetHeaderTemplate | TemplateRef<any> | null | no | Custom header template of target list. |
itemTemplate | TemplateRef<any> | null | yes | Custom item template. Parameters: $implicit: Data of the item; index: Index of the item |
Output | Description |
---|---|
(movedToTarget) | Event is emitted when items are moved from source to target. |
(movedAllToTarget) | Event is emitted when all items are moved from source to target. |
(movedToSource) | Event is emitted when items are moved from target to source. |
(movedAllToSource) | Event is emitted when all items are moved from target to source. |
(targetReordered) | Event is emitted when items are reordered within target list. |
(sourceReordered) | Event is emitted when items are reordered within source list. |
(targetSelected) | Event is emitted when items are selected within target list. |
(sourceSelected) | Event is emitted when items are selected within target list. |
(reset) | Event is emitted when reset control button is present and clicked. |
If you do love ngx-picklist I would appreciate a donation :)
MIT
FAQs
Angular picklist component
The npm package @gmerabishvili/ngx-picklist receives a total of 3 weekly downloads. As such, @gmerabishvili/ngx-picklist popularity was classified as not popular.
We found that @gmerabishvili/ngx-picklist 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.