A tree example

file-component.html

<i class="file {{data.extension}}" on-click="emitClick()">
  <span class="folder-name">{{data.basename}}</span>
</i>

file-component.js

import {Component, Scope} from 'ng/core';

@Component({
  interface: ['data'],
  events: ['item-click'],

  // these are the default values
  template: './file-component.html',
  style: './file-component.css'
})
class FileComponent {
  constructor() {}

  emitClick() {
    this.$scope.emit('item-click', this.data);
  }
}

folder-component.html

<i class="folder {{open: isOpen, collapsed: !isOpen}}" on-click="toggleChildren()">
  <span class="folder-name">{{data.basename}}</span>
</i>

<ul ng-if="isOpen">
  <li ng-repeat="item in data.children" dynamic-component="item.type" data="item"></li>
</ul>

folder-component.js

import {Component, Scope} from 'ng/core';

@Component({
  interface: ['data'],
  events: ['item-click'],

  // these are the default values
  template: './folder-component.html',
  style: './folder-component.css'
})
class FolderComponent {
  constructor($scope: Scope) {
    this.isOpen = false;
  }

  toggleChildren() {
    this.isOpen = !this.isOpen;
    this.$scope.emit('item-click', this.data);
  }
}

index.html

<!-- using in a parent component -->
<folder data="rootFolder" on-item-click="whatever()"></folder>

model.js

import {FileComponent} from '../file-component.js';
import {FolderComponent} from '../folder-component.js';

// these don't have to be classes,
// it can be any object
class FileItem {
  constructor(basename, extension) {
    this.basename = basename;
    this.extension = extension;
  }
  get type() {
    return FileComponent;
  }
}

class FolderItem {
  constructor(basename, children) {
    this.basename = basename;
    this.children = children;
  }
  get type() {
    return FolderComponent;
  }
}