Ng2 Directory 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. Will deal with them accordingly.

Usage

"ng2-directory-tree": "*"

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

// systemjs.config.js

var map = {
  ...

  'ng2-directory-tree': 'node_modules/ng2-directory-tree'
};

var packages = {
  ...

  'ng2-directory-tree': { main: 'ng2-directory-tree', defaultExtension: 'js' }
};

import { Component } from '@angular/core';
import { DirectoryTreeComponent } from 'ng2-directory-tree'

@Component({
    selector: 'my-app',
    template: `<directory-tree [directory]="dir"
                               (onChange)="logging($event)"
                               [keyboardWatch]=true>
               </directory-tree>`,
    directives: [DirectoryTreeComponent]
})
export class AppComponent {
    dir = {
      "name": "photos",
      "children": [
        {
          "name": "summer",
          "children": [
            {
              "name": "june",
              "children": [
                {
                  "name": "windsurf.jpg"
                }]
            }
          ]
        }
      ]
    }

    logging(node) {
        console.log(node)
    }
}

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.