treeview.component.ts

import { FlatTreeControl, NestedTreeControl } from '@angular/cdk/tree';
import { Component, OnInit } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener, MatTreeNestedDataSource } from '@angular/material/tree';
import { Observable } from 'rxjs';
import { LoadmoreDatabase, LoadmoreFlatNode, LoadmoreNode } from './particularData/particularData.service';
import { DynamicDatabase, DynamicDataSource, DynamicFlatNode } from './treeViewServic/treeView.service';
const LOAD_MORE = 'LOAD_MORE';
interface treeNode {
  name: string;
  children?: treeNode[];
}

const TREE_DATA: treeNode[] = [
  {
    name: 'TECH',
    children: [
      {name: 'Company Maintenance'},
      {
        name: 'Employees',
        children: [
          {name: 'Reports'}
        ]
      },
      {name: 'Human Resources'},
    ]
  }, {
    name: 'XRP',
    children: [
      {name: 'Company Maintenance'},
      {
        name: 'Employees',
        children: [
          {name: 'Reports'}
        ]
      },
      {name: 'Human Resources'},
    ]
  },
];

interface staticTreeNode {
  name: string;
  children?: staticTreeNode[];
}

const StaticTREEDATA: staticTreeNode[] = [
  {
    name: 'TECH',
    children: [
      {name: 'Company Maintenance'},
      {
        name: 'Employees',
      },
      {name: 'Human Resources'},
    ]
  }, {
    name: 'XRP',
    children: [
      {name: 'Company Maintenance'},
      {
        name: 'Employees',
        children: [
          {name: 'Company Maintainance-1'}
        ]
      },
      {name: 'Human Resources'},
    ]
  },
];
@Component({
  selector: 'app-treeview',
  templateUrl: './treeview.component.html',
  styleUrls: ['./treeview.component.scss']
})
export class TreeviewComponent {

  nodeMap = new Map<string, LoadmoreFlatNode>();
  treeControl2: FlatTreeControl<LoadmoreFlatNode>;
  treeFlattener2: MatTreeFlattener<LoadmoreNode, LoadmoreFlatNode>;
  // Flat tree data source
  dataSource2: MatTreeFlatDataSource<LoadmoreNode, LoadmoreFlatNode>;

  constructor(database: DynamicDatabase , private _database: LoadmoreDatabase) {

    this.dataSource.data = TREE_DATA;
    this.dataSourceStatic1.data = StaticTREEDATA;
    // for dynamic loading data

      this.treeControl1 = new FlatTreeControl<DynamicFlatNode>(this.getLevel, this.isExpandable);
      this.dataSource1 = new DynamicDataSource(this.treeControl1, database);

      this.dataSource1.data = database.initialData();

      // End of dynamic loading data

      this.treeFlattener2 = new MatTreeFlattener(this.transformer, this.getLevel2,
        this.isExpandable2, this.getChildren);

      this.treeControl2 = new FlatTreeControl<LoadmoreFlatNode>(this.getLevel2, this.isExpandable2);

      this.dataSource2 = new MatTreeFlatDataSource(this.treeControl2, this.treeFlattener2);

      _database.dataChange.subscribe(data => {
        this.dataSource2.data = data;
      });

      _database.initialize();
  }
  ngOnInit(){

  }
  // for dynamic loading data
      treeControl1: FlatTreeControl<DynamicFlatNode>;

      dataSource1: DynamicDataSource;
      getLevel = (node: DynamicFlatNode) => node.level;

      isExpandable = (node: DynamicFlatNode) => node.expandable;
      hasChild1 = (_: number, _nodeData: DynamicFlatNode) => _nodeData.expandable;
  // End of dynamic data

  // for static loading data
  treeControl = new NestedTreeControl<treeNode>(node => node.children);
  dataSource = new MatTreeNestedDataSource<treeNode>();
  treeControlStatic1 = new NestedTreeControl<staticTreeNode>(node => node.children);
  dataSourceStatic1 = new MatTreeNestedDataSource<staticTreeNode>();

 hasChild = (_: number, node: treeNode) => !!node.children && node.children.length > 0;
  hasChildStatic1 = (_: number, node: staticTreeNode) => !!node.children && node.children.length > 0;
  // End of static data

  // for particular data
    getChildren = (node: LoadmoreNode): Observable<LoadmoreNode[]> => node.childrenChange;

    transformer = (node: LoadmoreNode, level: number) => {
      const existingNode = this.nodeMap.get(node.item);

      if (existingNode) {
        return existingNode;
      }

      const newNode =
          new LoadmoreFlatNode(node.item, level, node.hasChildren, node.loadMoreParentItem);
      this.nodeMap.set(node.item, newNode);
      return newNode;
    };

    getLevel2 = (node: LoadmoreFlatNode) => node.level;

    isExpandable2 = (node: LoadmoreFlatNode) => node.expandable2;

    hasChild2 = (_: number, _nodeData: LoadmoreFlatNode) => _nodeData.expandable2;

    isLoadMore = (_: number, _nodeData: LoadmoreFlatNode , node: LoadmoreNode) => _nodeData.item === LOAD_MORE;

    /** Load more nodes from data source */
    loadMore(item: string) {
      this._database.loadMore(item);
    }

    loadChildren(node: LoadmoreFlatNode) {
      this._database.loadMore(node.item, true);
    }
}