Nocturnal Pumpkin Maelstrom

    @zakhefron/zak-ng-tree
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.16 • Public • Published

    Angular Tree Component @zakhefron/zak-ng-tree

    Angular component to create and display recursive tree

    Demo

    StackBlitz

    Getting started

    Install

    npm install @zakhefron/zak-ng-tree

    Usage

    Module

    import { ZakNgTreeModule } from '@zakhefron/zak-ng-tree';
    ....
    ...
    imports: [
        ....,
        ZakNgTreeModule
    ]

    Html

    <zak-ng-tree [items]="items" [options]="options" (onChange)="onChange($event)"></zak-ng-tree>
    Inputs

    [items] array of objects

    [
        {
          title: 'Parent 1',
          children: [
            {
              title: 'Child 1',
            },
            {
              title: 'Child 2',
              children: [
                {
                  title: 'Grandchild 1',
                },
                {
                  title: 'Grandchild 2',
                },
              ],
            },
            {
              title: 'Child 3',
            },
          ],
        },
        {
          title: 'Parent 2',
        }
    ]
    

    [options]object

    {
        enableAddDelete: true,
        enableMove: true,
        showNodeId: true,
        titleKey : 'title', 
        defaultNodeName: 'Node'
    }
    
    Property Type Description
    enableAddDelete Boolean To enable add, edit, delete nodes
    enableMove Boolean To enable nodes to move up / down
    showNodeId Boolean To show node id
    titleKey String Node title to display. Property of object inside Items Array. (Default: 'title')
    defaultNodeName String Default node name to display on creation
    Output

    onChange($event) output emits object with three property (event, items, item)

    Property Type Description
    event string Name of the event (selected / saved / movedUp / movedDown)
    items array of object this is the output of inputted items
    item object current item (selected / saved / movedUp / movedDown item)

    Sample Code

    app.module.ts

    import { BrowserModule } from "@angular/platform-browser";
    import { NgModule } from "@angular/core";
    import { AppComponent } from "./app.component";
    import { ZakNgTreeModule } from '@zakhefron/zak-ng-tree';
    
    @NgModule({
      declarations: [AppComponent],
      imports: [
          BrowserModule, 
          ZakNgTreeModule
          ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

    app.component.html

    <zak-ng-tree [items]="items" [options]="options" (onChange)="onChange($event)"></zak-ng-tree>

    app.component.ts

    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {  
    
    
      public options = {
        enableAddDelete: true,
        enableMove: true,
        showNodeId: true,
        titleKey: 'title',
        defaultNodeName: 'Test',
      };
    
      public items = [
        {
          title: 'Parent 1',
          children: [
            {
              title: 'Child 1',
            },
            {
              title: 'Child 2',
              children: [
                {
                  title: 'Grandchild 1',
                },
                {
                  title: 'Grandchild 2',
                },
              ],
            },
            {
              title: 'Child 3',
            },
          ],
        },
        {
          title: 'Parent 2',
        },
      ];
    
      onChange(event: {}) {
        console.log('Event', event);
      }
    }

    Install

    npm i @zakhefron/zak-ng-tree

    DownloadsWeekly Downloads

    3

    Version

    2.0.16

    License

    MIT

    Unpacked Size

    199 kB

    Total Files

    14

    Last publish

    Collaborators

    • zakhefron