Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/travelist/ng2-file-tree
Angular2 Components for Rendering Directory Tree
https://github.com/travelist/ng2-file-tree
Last synced: about 15 hours ago
JSON representation
Angular2 Components for Rendering Directory Tree
- Host: GitHub
- URL: https://github.com/travelist/ng2-file-tree
- Owner: travelist
- License: mit
- Created: 2016-07-27T00:09:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-25T22:48:37.000Z (about 8 years ago)
- Last Synced: 2025-01-05T05:06:26.039Z (7 days ago)
- Language: JavaScript
- Homepage:
- Size: 321 KB
- Stars: 11
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular2 File Tree [](https://circleci.com/gh/travelist/ng2-file-tree)
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;)
## Installation
In `package.json`, add following lines in the `dependencies` block:
```
"font-awesome": "~4.7.0" # Use any versions
"ng2-file-tree": "~0.4.0"
```
### [Angular2 QuickStart](https://angular.io/docs/ts/latest/quickstart.html)
```html
```
We can import this library using SystemJS (`systemjs.config.js`):
```javascript
// 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);
```
### [Angular CLI](https://github.com/angular/angular-cli)
1. `../node_modules/font-awesome/css/font-awesome.css` to **style** block of *angular-cli.json*.
2. `../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)` to **addons** block of *angular-cli.json*.
```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)"
]
}
```
## Usage
```javascript
// 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 { }
```
```javascript
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
`
})
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())
}
}
```
### Features
- [ ] Handling keyboard event
- [x] 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
### Contribution
Any reporting issues, sending pull requests, or even pushing the star button are welcome and appreciated.