import {ITreeComponent} from './tree.component';

export const trees:ITreeComponent[] = [
    {
        "leaf":true,
        "parentCategoryId":10001,
        "categoryName":"Первый родитель",
        "categoryId":10500,
        "url":"first-parent",
        "trees":
        [{
            "leaf":false,
            "parentCategoryId":10500,
            "categoryName":"Ребенок первого родителя",
            "categoryId":10515,
            "url":"children-first-parent",
            "trees":[]
        }]
    },
    {
        "leaf":true,
        "parentCategoryId":10001,
        "categoryName":"Второй родитель",
        "categoryId":10102,
        "url":"second-parent",
        "trees":
        [{
            "leaf":true,
            "parentCategoryId":10102,
            "categoryName":"Первый ребенок второго родителя",
            "categoryId":10614,
            "url":"first-children-second-parent",
            "trees":
            [{
                "leaf":false,
                "parentCategoryId":10614,
                "categoryName":"Внук",
                "categoryId":10633,
                "url":"vanok",
                "trees":[]
            },
            {
                "leaf":false,
                "parentCategoryId":10614,
                "categoryName":"Внучара",
                "categoryId":10634,
                "url":"big-boy",
                "trees":[]
            },
            {
                "leaf":false,
                "parentCategoryId":10614,
                "categoryName":"Внучка",
                "categoryId":10867,
                "url":"top-one-princes-good-girl",
                "trees":[]
            }]
        },
        {
            "leaf":true,
            "parentCategoryId":10102,
            "categoryName":"Второй ребенок второго родителя",
            "categoryId":10473,
            "url":"second-children-second-parent",
            "trees":
            [{
                "leaf":false,
                "parentCategoryId":10473,
                "categoryName":"Внук",
                "categoryId":10478,
                "url":"vano",
                "trees":[]
            },
            {
                "leaf":false,
                "parentCategoryId":10473,
                "categoryName":"Внучка",
                "categoryId":10475,
                "url":"olya",
                "trees":[]
            }]
        }]
    },
    {
        "leaf":true,
        "parentCategoryId":10001,
        "categoryName":"Соседка из квартиры 66",
        "categoryId":10105,
        "url":"sosedka-rembo",
        "trees":
        [{
            "leaf":false,
            "parentCategoryId":10105,
            "categoryName":"Сын маминой подруги",
            "categoryId":10360,
            "url":"cool-boy",
            "trees":[]
        }]
    }
];

import { Component, Input, Output, EventEmitter } from '@angular/core';

export interface ITreeComponent {
  leaf: boolean;
  parentCategoryId: number;
  categoryName: string;
  categoryId: number;
  url: string;
  trees?: Array<ITreeComponent>;
}

@Component({
  selector: 'trees',
  template: `
    <ul class="TreeComponents">
        <div *ngFor="let tree of trees" class="TreeComponent">
            <i *ngIf="tree.leaf" class="NodeButton fa fa-caret-square-o-down"></i>
            <ul>
                <li>
                    (Parent: {{tree.parentCategoryId}})
                    {{tree.categoryName}}.
                    Id: {{tree.categoryId}}.
                    <trees [trees]="tree.trees" *ngIf="tree.trees">
                    </trees>
                </li>
            </ul>
        </div>
    </ul>
  `,
  styleUrls: ["./tree.component.css"]
})

export class TreeComponent {
  isExpanded: boolean;
  @Input() trees: Array<ITreeComponent>;
  @Input() SelectedNode: ITreeComponent;

  @Output() onSelectedChanged: EventEmitter<ITreeComponent> = new EventEmitter<ITreeComponent>();
  @Output() onRequestNodes: EventEmitter<ITreeComponent> = new EventEmitter<ITreeComponent>();

  constructor(){}

  onSelectNode(node: ITreeComponent) {
    this.onSelectedChanged.emit(node);
  }

  onRequestLocal(node: ITreeComponent) {
    this.onRequestNodes.emit(node);
  }
}

import { Component } from '@angular/core';
import { trees } from './tree/tree-data';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  treesData = trees;
}

<div>
    <h1>Пробный рекурсивный вывод</h1>
    <trees [trees]="treesData"></trees>
</div>