Getting Started
This page will help you get started with angular2-tree-component.
You'll be up and running in a jiffy!
Angular 2.0.0
Tree component currently supports Angular release version 2.0.0.
For earlier versions checkout the changelog on the github page
DEMO
Installation
npm install --save angular2-tree-component
Basic usage
// module:
import { TreeModule } from 'angular2-tree-component';
@NgModule({
imports: [..., TreeModule],
...
})
export class AppModule {
...
}
// usage:
@Component({
selector: 'app',
template: '<Tree [nodes]="nodes"></Tree>'
});
export class App {
nodes = [
{
id: 1,
name: 'root1',
children: [
{ id: 2, name: 'child1' },
{ id: 3, name: 'child2' }
]
},
{
id: 4,
name: 'root2',
children: [
{ id: 5, name: 'child2.1' },
{
id: 6,
name: 'child2.2',
children: [
{ id: 7, name: 'subsub' }
]
}
]
}
];
}
Features
- Keyboard navigation
- Async children load
- Expand / collapse / select nodes
- Events: select, deselect, collapse, expand, focus, etc.
- Custom node template (string or component)
- Custom loading component (for async data)
- Custom children / name attributes
- API to control the tree from outside
- Very basic customizable CSS
See more in the sidebar help pages.
SystemJS
There's currently an issue with systemJS and lodash.
Until we solve it, please install lodash into the project:
npm install --save lodash
and add these lines to systemjs.config.js:
var map = {
'angular2-tree-component': 'node_modules/angular2-tree-component',
'lodash': 'node_modules/lodash',
};
var packages = {
'angular2-tree-component' : { main: 'dist/angular2-tree-component.js', defaultExtension: 'js' },
'lodash' : { main: 'lodash.js', defaultExtension: 'js' },
};
Updated less than a minute ago