Angular2 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
We can import this library using SystemJS (systemjs.config.js
):
// This example is following to Angular2 Quick Start Documentation { System;}this;
Angular CLI
../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 */
Usage
// app/app.module.ts // (1/2) @
; @ fileTree = "name": "photos" "children": "name": "summer" "children": "name": "june" "children": "name": "windsurf.jpg" :void console; // Get full file path console
Features
- 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
Contribution
Any reporting issues, sending pull requests, or even pushing the star button are welcome and appreciated.