Angular 4: Custom directive content not rendering for innerHTML

Question

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.