Pages UI
Search…
Tree View
Tree view plugin is powered by a third party plugin. Please refer there documentation for further celebrations. https://angular2-tree.readme.io/docs

Importing

First import it to your app module or any submodule as you wish
1
import { TreeModule } from 'angular-tree-component';
2
@NgModule({
3
imports: [TreeModule,...]
4
})
5
export class AppModule(){}
Copied!

How to use

Basic Select with Search
HTML
Typescript
1
<tree-root [nodes]="simpleNodes" [options]="options" class="tree-wrapper bold-node-text level1-document-icon-only m-b-20"></tree-root>
Copied!
1
simpleNodes = [
2
{
3
id: 1,
4
name: 'item1 with key and tooltip'
5
},
6
{
7
id: 2,
8
name: 'item2'
9
},
10
{
11
id: 3,
12
name: 'Folder with some children',
13
children: [
14
{ id: 4, name: 'Sub-item 3.1',
15
children:[
16
{id: 5, name: 'Sub-item 3.1.1'},
17
{id: 6, name: 'Sub-item 3.1.2'}
18
]
19
},
20
{ id: 7, name: 'Sub-item 3.2',
21
children:[
22
{id: 8, name: 'Sub-item 3.2.1'},
23
{id: 9, name: 'Sub-item 3.2.2'}
24
]
25
}
26
]
27
},
28
{
29
id: 10,
30
name: 'Document with some children (expanded on init)',
31
isExpanded:true,
32
children: [
33
{ id: 11, name: 'Sub-item 4.1 (active and focus on init)',
34
isFocused:true
35
}
36
]
37
},
38
];
39
40
options = {
41
animateExpand:true,
42
};
Copied!
Copy link