ng-metamagic-extensions/src/bootstrap/treeview/treeview.component.ts

[](https://badge.fury.io/js/ng-metamagic-extensions) []() [![NPM](https://nodei.co/npm/ng-metamagic-extension

import {OnInit, Input, Component, SimpleChange, EventEmitter, Output, SimpleChanges} from "@angular/core";
import {TreeViewService} from "./treeview.service";

@Component({
    selector : 'tree-view',
    template : `<ul style="list-style-type: none;">
        <li style="cursor: pointer" *ngFor="let treeData of data">
            <div >
                <span [ngClass]="{'glyphicon glyphicon-minus': treeData.expanded, 'glyphicon glyphicon-plus': (!treeData.expanded && treeData.children)}" (click)="toggle(treeData)"> </span>
                <img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="><label style="cursor: pointer" (click)="emitData(treeData)">{{ treeData.text }}</label>
            </div>
            <div *ngIf="treeData.expanded && treeData.expanded  == true">
                <ul style="list-style-type: none;">
                    <li style="cursor: pointer" *ngFor="let leaf of treeData.children">
                        <div>
                            <span [ngClass]="{'glyphicon glyphicon-minus': leaf.expanded, 'glyphicon glyphicon-plus': (!leaf.expanded && leaf.children)}" (click)="toggle(leaf)"> </span>
                            <img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="><label (click)="emitData(leaf)">{{ leaf.text }}</label>
                        </div>
                        <div *ngIf="leaf.expanded && leaf.expanded  == true">
                            <tree-view [dataTableBindData]="leaf" [dataReader]="'children'" (selectedRecord)="setSelectedRecord($event)"></tree-view>
                        </div>
                    </li>
                </ul>

            </div>
        </li>
    </ul>
    `,
    providers :[TreeViewService]
})

export class TreeViewComponent implements  OnInit{

    @Input()
    httpUrl : string;

    @Input()
    httpMethod : string;

    @Input()
    dataReader : string;

    @Input()
    dataTableBindData : any;

    @Output()
    selectedRecord : any = new EventEmitter<any>();

    data : any;

    lazyNode : any;

    constructor (private  treeViewService : TreeViewService){
    }

    ngOnInit(){

    }

    ngAfterViewInit(){
        if(this.httpMethod && this.httpUrl){
            this.treeViewService.fetchData(this,this.httpUrl,this.httpMethod);
        }
        else if(this.dataTableBindData){
            this.setData(this.dataTableBindData);
        }
    }

    ngOnChanges(change : SimpleChanges){
        if(change['dataTableBindData']){
            let data = change['dataTableBindData'].currentValue;
            if(data){
                this.setData(data)
            }
        }
    }

    setData(httpResponse: any){
        let treedata = this.getResponseData(httpResponse);
        if(treedata){
            this.data = treedata;
        }
    }

    getResponseData(httpResponse : any){
        let responsedata = httpResponse;
        let dr = this.dataReader.split(".");
        for(let ir = 0 ; ir<dr.length; ir++){
            responsedata = responsedata[dr[ir]];
        }
        return responsedata;
    }

    toggle(treeData : any){
        if(!treeData.leaf)
            treeData.expanded = !treeData.expanded;

        if(treeData.lazy && treeData.children && treeData.children.length<=0){
            this.lazyNode = treeData;
            this.treeViewService.fetchLazyData(this,treeData.lazy.httpUrl,treeData.lazy.httpMethod);
        }
    }

    setLazyData(httpResponse: any){
            delete this.lazyNode.leaf;
            this.lazyNode['expanded'] = true;
            for(let di = 0 ; di < httpResponse.data.length; di++){
                this.lazyNode.children.push(httpResponse.data[0]);
            }
    }
    setSelectedRecord(treeData : any){
        this.emitData(treeData);
    }

    emitData(treeData :any){
        this.selectedRecord.emit(JSON.parse(JSON.stringify(treeData)));
    }
}