Getting Started
This page will help you get started with angular-tree-component.
You'll be up and running in a jiffy!
Angular 2 + 4 + 5
Tree component currently supports Angular release version 2.x.x, 4.x.x and 5.x.x.
DEMO
Installation
npm install --save angular-tree-component
Basic usage
@import '~angular-tree-component/dist/angular-tree-component.css';
// module:
import { TreeModule } from 'angular-tree-component';
@NgModule({
imports: [..., TreeModule],
...
})
export class AppModule {
...
}
// usage:
@Component({
selector: 'app',
template: '<tree-root [nodes]="nodes"></tree-root>'
});
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
- Drag & Drop
- Virtual Scroll to support large trees
- 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
Sorry guys, SystemJS is not supported.
Modern web applications use bundlers like Webpack.
We've tried to support SystemJS for a year, but it just causes too many issues.
Updated less than a minute ago