Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A tree example
<i class="file {{data.extension}}" on-click="emitClick()">
<span class="folder-name">{{data.basename}}</span>
</i>
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);
}
}
<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>
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);
}
}
<!-- using in a parent component -->
<folder data="rootFolder" on-item-click="whatever()"></folder>
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment