NgxTreeData

Description

It is a complete and lightweight component for loading data in tree form using the Material CDK, such as Angular Material.

Installation

Just add the NgxTreeDataModule module to use the component.

import { NgxTreeDataModule } from 'ngx-tree-data';
 
@NgModule({
  imports: [
    ...
    NgxTreeDataModule
  ]
})
 
export class AppModule { }

Example use:

<ngx-tree-data (selected)="dataSelected = $event" [config]="config">
  <div class="title">
      <h2>Ngx-tree-data</h2>
  </div>
</ngx-tree-data>

export class AppComponent {
  config: NgxTreeDataConfig = {
    selectFirst: false,
    selectThis: -1,
    checkbox: true,
    search: false,
    selectAll: false,
    multiple: false,
  };
 
  data: TreeData [] = DATA;
  dataSelected;
 
  constructor(private treeService: NgxTreeDataService) {
    this.treeService.initialize(this.data);
  }
}
 

API

The data we send to NgxTreeDataService must be in TreeData format.

export class TreeData {
  text: string;
  id ?= -1;
  selected: boolean;
  children: TreeData [] | null;
  data ?: any = null;
}
 
export class NgxTreeDataConfig {
    selectFirst?: boolean;
    selectThis?: number;
    checkbox?: boolean;
    search?: boolean;
    selectAll?: boolean;
    multiple?: boolean;
}

Example Data

const DATA: TreeData [] = [
    {
      id: 1,
      text: 'item_1',
      selected: false,
      data: {
        example: 'data'
      },
      children: [
        {
          id: 2,
          text: 'item_1.1',
          children: null,
          selected: false,
        },
        {
          id: 2,
          text: 'item_1.2',
          children: null,
          selected: false,
        },
        {
          id: 2,
          text: 'item_1.3',
          children: null,
          selected: false,
        }
      ],
    },
    {
      id: 3,
      text: 'item_2',
      selected: false,
      children: [
        {
          id: 4,
          text: 'item_2.1',
          children: null,
          selected: false,
        },
        {
          id: 4,
          text: 'item_2.2',
          children: null,
          selected: false,
        }
      ],
    }
  ]
 

Attribute	Description
@Output() selected: ItemFlatNode [] or ItemNode	Depending on the mode you are in, ItemFlatNode [] or ItemNode will be returned.
@Input() config: NgxTreeDataConfig	You must pass a NgxTreeDataConfig