Tree with added fields example

The data used in the demo is taken from the Morrisons website category menu.
The sales figures are just randomly generated numbers.
Click here to view/download the data file

Loading..

In your component.html

<tree [data]="tree" [debounceTime]="200" *ngIf="tree">
  <!-- Place your heading content here - there is allocated placeholder
       between the search bar and the tree -->
  <div style="display: flex; font-weight: bold; text-align: center; top: 0;
     position: sticky; background-color: white">
    <div style="width: 7rem; padding: 0 .2rem 0 .2rem; margin-left: auto;
         border: 1px solid #dee2e6; border-right: 0; border-top-left-radius: 0.25rem">Sales</div>
    <div style="width: 7rem; padding: 0 .2rem 0 .2rem; 
            border: 1px solid #dee2e6; border-top-right-radius: 0.25rem">%
      of Total</div>
  </div>
</tree>

In your component.ts

//  The code is exactly the same as the one in the basic usage example.
//  The fields are defined in your data.

---

Basic usage example

The data used in the demo is taken from Morrisons website category menu.
Click here to view/download the data file

Loading..

In your component.html

<tree [data]="basicTree" *ngIf="tree">
  </tree>
  

In your component.ts

import { Component, OnInit } from '@angular/core';
  import { Node } from 'projects/tree/src/lib/node/node';
  import { DataService } from '../data.service';
  
  @Component({
    selector: 'basic',
    templateUrl: './basic.component.html',
    styleUrls: ['./basic.component.scss']
  })
  export class BasicComponent implements OnInit {
    tree: Node[];
  
    constructor(private dataService: DataService) {
    }
  
    ngOnInit() {
      //  Get the data from data.json
      this.dataService.getTree('./assets/data.json').subscribe(result => {
        this.tree = JSON.parse(JSON.stringify(result));
      });
    }
  }