Vfrdtyky

I was trying to create dynamic tree view component in angular 4. I have an array which have the data to form the dynamic tree view.

I tried to create a custom directive to achieve this. Here is my code :

import { Directive,ElementRef, Input, HostListener } from '@angular/core';



@Directive({

  selector: '[appTreeView]'

})

export class TreeViewDirective {



  @Input('appTreeView') categories:any;

  @Input() config:any = {

    categoryList: null,

    children : ,

    nodeLabel : '',

    treeId : '1',

    nodeId : '12'

  };

  elRef: any;

  constructor(el: ElementRef) {

    console.log(Element);

    console.log(this.config);

    console.log(this.categories);

    this.elRef = el;

  }



  ngOnInit(){

    console.log('input : ',this.categories);

    this.elRef.nativeElement.innerHTML = '<ul>' +

    '<li *ngFor="let node in ' + this.categories + '; let indx = index">' +

      '<i class="collapsed" data-ng-show="node.' + this.config.children + '.length && node.collapsed" data-ng-click="' + this.config.treeId + '.selectNodeHead(node)"></i>' +

      '<i class="expanded" data-ng-show="node.' + this.config.children + '.length && !node.collapsed" data-ng-click="' + this.config.treeId + '.selectNodeHead(node)"></i>' +

      '<i class="normal" data-ng-hide="node.' + this.config.children + '.length"></i> ' +

      '<span data-ng-class="node.selected" data-ng-click="selectNodeLabel(node)">{{node.' + this.config.nodeLabel + '}}</span>' +

      '<div data-ng-hide="node.collapsed" data-tree-id="' + this.config.treeId + '" data-tree-model="node.' + this.config.children + '" data-node-id=' + this.config.nodeId + ' data-node-label=' + this.config.nodeLabel + ' data-node-children=' + this.config.children + '></div>' +

    '</li>' +

  '</ul>';

  }





}

In my component html :

<div [appTreeView]="categoryListArray"></div>

In component ts :

import { Component, OnInit } from '@angular/core';



@Component({

  selector: 'app-tree-view-test',

  templateUrl: './tree-view-test.component.html',

  styleUrls: ['./tree-view-test.component.css']

})

export class TreeViewTestComponent implements OnInit {



  categoryListArray:any = ;

  constructor() { }



  ngOnInit() {

    this.categoryListArray = [

      { "label" : "User", "id" : "role1", "children" : [

        { "label" : "subUser1", "id" : "role11", "children" :  },

        { "label" : "subUser2", "id" : "role12", "children" : [

          { "label" : "subUser2-1", "id" : "role121", "children" : [

            { "label" : "subUser2-1-1", "id" : "role1211", "children" :  },

            { "label" : "subUser2-1-2", "id" : "role1212", "children" :  }

          ]}

        ]}

      ]},

      { "label" : "Admin", "id" : "role2", "children" :  },

      { "label" : "Guest", "id" : "role3", "children" :  }

    ];

  }



  onCategoryClick(event){

    console.log('clicked item : ', event);

  }



}

Here is the output how am getting :

Please check the inspect view, my code is not rendered properly. *ngFor is still there and I am able to see interpolation symbol in my output. Don't know why my custom directive is not working. Here is the console output for reference.