Angular2 Component for rendering directory tree
(Demo with mouse clicks and keyboard shortcuts)Please feel free to open issues for new features, requirements, and bug reports. This repository is developing based on requests;)
In package.json
, add following lines in the dependencies
block:
"font-awesome": "~4.7.0" # Use any versions
"ng2-file-tree": "~0.4.0"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
We can import this library using SystemJS (systemjs.config.js
):
// This example is following to Angular2 Quick Start Documentation
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
// Add this line (1/2)
'ng2-file-tree': 'node_modules/ng2-file-tree',
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
// Add this line (2/2)
'ng2-file-tree': { defaultExtension: 'js' }
}
});
})(this);
../node_modules/font-awesome/css/font-awesome.css
to style block of angular-cli.json.../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)
to addons block of angular-cli.json.
/* angular-cli.json */
{
"apps": [
{
"styles": [
"../node_modules/font-awesome/css/font-awesome.css"
]
}
],
"addons": [
"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
]
}
// app/app.module.ts
// (1/2)
import { Ng2FileTreeModule } from 'ng2-file-tree/ng2-file-tree'
@NgModule({
imports: [ BrowserModule, Ng2FileTreeModule ], // (2/2)
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<file-tree [tree]="fileTree"
(onChange)="clickFileTree($event)"
[keyboardWatch]=true>
</file-tree>`
})
export class AppComponent {
fileTree = {
"name": "photos",
"children": [
{
"name": "summer",
"children": [
{
"name": "june",
"children": [
{
"name": "windsurf.jpg"
}]
}
]
}
]
}
clickFileTree(fileNode:TreeNode):void {
console.log(fileNode);
// Get full file path
console.log(fileNode.getFullPath())
}
}
- Handling keyboard event
- Move by up-arrow, down-arrow
- Move by up-arrow, down-arrow
- General icon support (now it's hard coded)
- Change icons by file type (
.jpg
,.js
, ...) - ....so forth
Any reporting issues, sending pull requests, or even pushing the star button are welcome and appreciated.