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

@Component({
  selector: 'mat-demo-tree',
  template: `
    <mat-tree [tree]="tree"></mat-tree>
    <mat-tree [tree]="tree" direction="right"></mat-tree>
    `,
  styleUrls: ['./mat-demo-tree.component.less']
})
export class MatDemoTreeComponent {
  tree = {
    value: 'grandfather',
    id: 1,
    children: [
      {
        id: 2,
        value: 'child1',
        settings: {
          checked: true,
          templates: '<span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tab-parent-folder"></use></svg></span>'
        }
      },
      {
        id: 3,
        value: 'child2',
        children: [
          {
            id: 4,
            value: 'grandchild'
          }
        ]
      }
    ]
  };

  leafs: any[] = [];

  onTreeInit(leafs: any[]) {
    this.leafs = leafs;
  }

  filterLeaf(leafs: any[]) {
    return leafs.map(leaf => ({ id: leaf.id, checked: leaf.checked }));
  }
}