Angular2 File Tree

Angular2 Component for rendering directory tree

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

<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);

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.

/* 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

// 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())
    }
}

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.