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.
@sergioblanco86/ngx-nestable
Advanced tools
Readme
Nestable list for Angular4 and beyond. This is a Angular adaptation of Jquery Nestable library. Demo This version has been modified to fit special necesities. The nested property 'children' has been chaged for 'properties'. Once you run NPM INSTALL then go to node_modules/ng-packagr, delete de node_modules folder, open package.json and remove all the ^ and ~ and then run NPM INSTALL here. There's an issue with this package.
npm i ngx-nestable --save
app.module.ts
import { NestableModule } from 'ngx-nestable';
@NgModule({
imports: [NestableModule],
bootstrap: [AppComponent]
})
export class AppModule {}
app.component.ts
public options = {
fixedDepth: true
} as NestableSettings;
public list = [
{ 'id': 1 },
{
'expanded': true,
'id': 2, 'properties': [
{ 'id': 3 },
{ 'id': 4 },
{
'expanded': false,
'id': 5, 'properties': [
{ 'id': 6 },
{ 'id': 7 },
{ 'id': 8 }
]
},
{ 'id': 9 },
{ 'id': 10 }
]
},
{ 'id': 11 }
];
app.html
<ngx-nestable [(list)]="list" [options]="options" [template]="itemTemplate">
</ngx-nestable>
<ng-template #itemTemplate let-row>
<button mat-icon-button [ngxNestableDragHandle]="row">
<mat-icon>drag_handle</mat-icon>
</button>
<button mat-icon-button *ngIf="row.item.properties && row.item.properties.length; else empty_item" [ngxNestableExpandCollapse]="row">
<mat-icon>{{row.item.$$expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}
</mat-icon>
</button>
<div>Item: {{row.item.id}}</div>
</ng-template>
<ng-template #empty_item>
<span style="width: 40px"></span>
</ng-template>
Name | Type | Default | Descirption |
---|---|---|---|
list | Array | Items which will be displayed in tree | |
template | TemplateRef | HTML template for tree item. Inside this template you can place directives (ngxNestableDragHandle and ngxNestableExpandCollapse). That will describe the custom look and position of these elements. Otherwise, the default functions are applied. |
Name | Type | Default | Descirption |
---|---|---|---|
fixedDepth | boolean | false | Constaint items to keep their initial depth |
maxDepth | number | 5 | Maximum nested depth |
threshold | number | 20 | Distance in px after which horizontal movement (nesting) is applied. Also gives padding to the tree. |
disableDrag | boolean | false | Disable/enable drag event |
template | TemplateRef | HTML template for tree item. Inside this template you can place directives (ngxNestableDragHandle and ngxNestableExpandCollapse). That will describe the custom look and position of these elements, otherwise the default functions are applied. |
Name | Type | Descirption |
---|---|---|
drag | void | Emits event when item drag is started |
drop | void | Emits event when item is dropped |
disclosure | void | Emits event when item expand/collapse state is changed |
This project is licensed under the MIT License - see the LICENSE.md file for details
FAQs
Nestable list with drag and drop for Angular
The npm package @sergioblanco86/ngx-nestable receives a total of 30 weekly downloads. As such, @sergioblanco86/ngx-nestable popularity was classified as not popular.
We found that @sergioblanco86/ngx-nestable 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.