npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fst-ngx-tree-dnd

v3.0.1

Published

Fork version of ngx-tree-dnd as the original one did not support Angular 14

Downloads

61

Readme

fst-ngx-tree-dnd

Fork version of ngx-tree-dnd as the original one did not support Angular 14

Angular 14 support tree with drag-and-drop sortable data tree. It`s fast and smart.

Dependency Status Build status codecov Known Vulnerabilities License MIT

Help the project and star it :3

Installation

New ngx-tree-dnd with draggable/sortable tree data, easy for use.

To install library, run:

$ npm install fst-ngx-tree-dnd --save

Import NgxTreeModule module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxTreeDndModule } from 'fst-ngx-tree-dnd'; // here

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxTreeDndModule,   // add  NgxTreeDndModule to imports
    LibraryModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once library is imported, you can use it`s components, directives and pipes in your Angular application:

<h1>
  {{title}}
</h1>
<lib-ngx-tree-component [treeData]='youTree' [config]='config'></lib-ngx-tree-component>

Styles

You need to import default styles for tree ( you can change them by rewrite classes )

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "node_modules/ngx-tree-dnd/styles-tree-dnd.css" 
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

Demo

Demo with editor:

Run on stackblitz.com

Demo application:

Run on stackblitz.com

NGX-TREE-DND DOCS

With the development of the plug-in docs will be replenished. So do not forget update the packadge.

1.Set the base tree

Use [treeData] on ngx-tree-component BUT be careful!

The interface accepts only the following structure:

 export interface TreeModel {
    name: string; // name of item
    id: number; // id of item
    options?: TreeItemOptions; // options of item
    childrens: TreeModel[]; // childrens list
}
export interface TreeItemOptions {
    // item options
    href?: string;
    hidden?: boolean;
    hideChildrens?: boolean;
    draggable?: boolean;
    position?: number;
    edit?: boolean;
    disabled?: boolean;
    // item buttons
    showDropChildZone?: boolean;
    showActionButtons?: boolean;
    showDeleteButton?: boolean;
    showExpandButton?: boolean;
}

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' ></lib-ngx-tree-component>

in you component file:

  youTree = [
    {
      name: 'first elem',
      id: 1234567890,
      childrens: [
        {
          name: 'first child elem',
          id: 0987654321,
          childrens: []
        }
      ]
    },
  ];

2.Events

You can trigger events by following code:

ondragstart()

Trigger start of dragging element

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' (ondragstart)='onDragStart($event)'> </lib-ngx-tree-component>

in you component file:

    onDragStart(event) {
    console.log(event);
  }

ondragenter()

Trigger if draggable element enter to drop zone.

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' (ondragenter)='onDragEnter($event)'> </lib-ngx-tree-component>

in you component file:

    onDragEnter(event) {
    console.log(event);
  }

ondragleave()

Trigger if draggable element enter to drop zone.

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' (ondragleave)='onDragLeave($event)'> </lib-ngx-tree-component>

in you component file:

    onDragLeave(event) {
    console.log(event);
  }

ondragend()

Trigger end of drag event

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' (ondragend)='onDragEnd($event)'> </lib-ngx-tree-component>

in you component file:

    onDragEnd(event) {
    console.log(event);
  }

onallowdrop()

Trigger enter on drop zone

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' (onallowdrop)='onAllowDrop($event)'> </lib-ngx-tree-component>

in you component file:

    onAllowDrop(event) {
    console.log(event);
  }

ondrop()

Trigger drop item action

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' (ondrop)='onDrop($event)'> </lib-ngx-tree-component>

in you component file:

    onDrop(event) {
    console.log(event);
  }

onadditem()

Trigger add new item action

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' (onadditem)='onAddItem($event)'> </lib-ngx-tree-component>

in you component file:

    onAddItem(event) {
    console.log(event);
  }

onStartRenameItem()

Trigger start renaming item

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' (onStartRenameItem)='onStartRenameItem($event)'> </lib-ngx-tree-component>

in you component file:

  onStartRenameItem(event) {
    console.log(event);
  }

onFinishRenameItem()

Trigger finish renaming item after validation

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' (onStartRenameItem)='onFinishRenameItem($event)'> </lib-ngx-tree-component>

in you component file:

  onFinishRenameItem(event) {
    console.log(event);
  }

onStartDeleteItem()

Trigger start Deleting action item

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' (onStartDeleteItem)='onStartDelete($event)'> </lib-ngx-tree-component>

in you component file:

  onStartDelete(event) {
    console.log(event);
  }

onFinishDeleteItem()

Trigger finish deleting action item

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' (onFinishDeleteItem)='onFinishDelete($event)'> </lib-ngx-tree-component>

in you component file:

  onFinishDelete(event) {
    console.log(event);
  }

onCancelDeleteItem()

Trigger cancel deleting action item

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' (onCancelDeleteItem)='onCancelDelete($event)'> </lib-ngx-tree-component>

in you component file:

  onCancelDelete(event) {
    console.log(event);
  }

3. Config

You can enable/disable and set some elements on tree by write simple config:

example

in you template file:

<lib-ngx-tree-component [treeData]='youTree' [config]='config'> </lib-ngx-tree-component>

in you component file:

    config =  {
      showActionButtons: true, // show/hide action buttons for all elements
      showAddButtons: true, // show/hide add button for all elements
      showRenameButtons: true, // show/hide rename buttons for all elements
      showDeleteButtons: true, // show/hide delete buttons for all elements
      showRootActionButtons: true, // shlow/hide root action bottons
      enableExpandButtons: true, // // show/hide expand buttons for all elements
      enableDragging: true, // enable/disable dragging
      rootTitle: 'Root', // Tree titile name
      validationText: 'Enter valid name', // form validation text 
      minCharacterLength: 1, // minimum valid chars
      setItemsAsLinks: false, // set tree as <a> link-items, use 'href' option for set link.
      setFontSize: 16, // font-size of items in tree.
      setIconSize: 14 // font-size of font-awesome icons inside buttons.
    }

4. Items options

You can change items options by set 'options' key on item object.

example

in you component file:

    youTree = [
      {
        name: 'google.com',
        id: 777,
        options: {
            // item options
            href: 'google.com', // item href for <a> , use if you set 'setItemsAsLinks: true' in config.
            hidden: 'false', // hide element without removing from data array.
            hideChildrens: false, // hide childrens of element.
            draggable: true, // allow block dragging single element if set 'enableDragging: true'
            position: 1,  // set position of item for sort tree.
            disabled: false, // disaled buttons and add opacity to element.
            // buttons
            showActionButtons: true, // show/hide  action buttons for element.
            showDeleteButton: true, // if 'false' element cannot be deleted.
            showExpandButton: true // show/hide expand buttons for element.
        }
        childrens: []
      }
    ];

5. Styles

You can rewrite all styles like you want. Here some for example:

  /* ===Tree items=== */
  .tree-child {
    /* change styles for child elements */
  }
  .tree-title {
    /* change styles for items title */
  }
  .tree-content {
    /* change styles for tree.childrens wrapper */
  }
  .tree-link {
    /* change styles for links if  config.setTreeItemAsLinks = true  */
  }
  /* ===Form=== */
  .input-rename {
    /* change styles for input name/rename  */
  }
  /* ===Buttons=== */
  .tree-btn {
    /*  used in all tree buttons  */
  }
  .add-btn {
      /*  styles for add button  */
  }
  .submit-btn {
      /*  styles for submit button  */
  }
  .edit-btn {
      /*  styles for edit button  */
  }
  .delete-btn {
      /*  styles for delete button  */
  }
  .show-btn {
      /*  styles for show expand button  */
  }
  .hide-btn {
      /*  styles for hide expand button  */
  }

Special thanks to the people who help to improve and maintain this repository:

njofce

Thank you for use my plug-in! Subscribe for more plugins! :)

Made with love by Zicrael(Yaroslav Kikot) ^^

License

MIT © Yaroslav Kikot