5 | [ ] Regression (a behavior that used to work and stopped working in a new release)
6 | [ ] Bug report
7 | [ ] Feature request
8 | [ ] Documentation issue or request
9 | To create columns inside the tree we need to use the templating options of the tree and style them with css.
12 |13 | The example component contains two parts. The header and the tree itself. The header is responsible for displaying the column header. 14 | This is needed to give the tree the grid style. If you just want the tree to have columns without any header you don't need to build a header. 15 |
16 | 17 |
19 | To show the tree in columns it's not needed to use the full templating option. But at least the treeNodeWrapperTemplate is needed.
20 | See also the Template Fundamentals.
21 |
25 | The example uses a simple array columns = ['city', 'zipCode'] to handle the columns.
26 | This array includes the property names that should be shown as columns and does not include the name, which is the first column.
27 | The name is handled differently as seen in the example. The columns array is just looped over and shown.
28 | In a more advanced example you could have the columns array as an input and also handle the name dynamically.
29 |
12 | This example is based on Issue 813.
13 | It relies on the treeNodeTemplate to customize the display of each node.
14 | The example uses simple buttons to handle basic functions for creating, copying and deleting nodes.
15 |
17 | The example does not show a edit function because of the endless possibilities on how to implement this.
18 | One option could be to show an input field instead of the span with the name of the node.
19 | This could be triggered via button, double click or how your app enters edit mode.
20 |
API:
9 | 10 | 11 | 12 | 13 | 14 | 15 | 20 | 25 | 30 | 34 | 38 | 42 | 46 | 50 | -------------------------------------------------------------------------------- /projects/docs-app/src/app/fundamentals/api/api-demo/api-demo.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CirclonGroup/angular-tree-component/19b58abe33dcbddbcba80c80ed26babfb7d43a16/projects/docs-app/src/app/fundamentals/api/api-demo/api-demo.component.scss -------------------------------------------------------------------------------- /projects/docs-app/src/app/fundamentals/api/api-demo/api-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { ApiDemoComponent } from './api-demo.component'; 4 | 5 | describe('ApiDemoComponent', () => { 6 | let component: ApiDemoComponent; 7 | let fixture: ComponentFixtureOr by accessing the treeNode that is passed through Events or using Action Mapping.
Whether the tree should be focused. Key navigation only works when the tree is focused.
8 |Default value: false.
Case: when tree is hidden (for example inside tab or modal), it is not rendered when it becomes visible.
5 |Solution: after it becomes visible (preferably using setTimeout) - call tree.sizeChanged(), which recalculates the rendered nodes according to the actual viewport size.
Maybe you are not supplying unique IDs to the nodes.
9 |The tree maintains its state by using IDs, and if you don't supply ones the tree will generate random ones automatically. Which means that if you update the data - the state will be lost.
10 | 11 |See scrollContainer option in Options for more information.
Inputs to Tree component:
4 | 5 |Array of root nodes of the tree.
10 |Each node may contain the following fields:
11 | 12 || Property | 15 |Description | 16 |
|---|---|
| id | 20 |
21 | Unique ID for the node. 22 | If one is not supplied it will be created by the tree library. 23 | |
24 |
| name | 28 |Will be displayed by default in the tree. | 29 |
| children | 33 |An array of the node's children. 34 | Each child is an object with the same structure as the parent node. |
35 |
| hasChildren | 39 |For async data load. Denotes that this node might have children, even when 'children' attr is empty. | 40 |
| isExpanded | 44 |Determines whether the node starts as expanded by default. Notice that this field is not bindable, meaning that changing it doesn't affect the tree and vice versa. | 45 |
Example:
49 | 50 |Whether the tree should be focused. Key navigation only works when the tree is focused.
55 |Default value: false.
Object of type ITreeOptions
Example:
10 | 11 |
4 | The tree allows to load children asynchronously using getChildren option, and hasChildren field on the node.
5 |
This options receives a function that has a TreeNode parameter, and returns a value or a promise that resolves to the node's children:
18 | 19 |
22 | The function will be called whenever a node is expanded, the hasChildren field is true, and the children field is empty.
23 | The result will be loaded into the node's children attribute.
24 |
When navigating with keys or clicking a node in the edges of the screen, the tree will automatically try to scroll the selected node into view.
4 |Also, you can call scrollIntoView on any node to make it visible.
Auto scrolling is built-in to the tree. Simply wrap the tree with a container that has a height and you're good.
8 |The tree has an inner element called viewport that is scrollable.
9 | 10 |Sometimes you don't want to wrap the tree with a scrollable container, and want the scrolling to be part of a different element.
12 |Use the scrollContainer option for this purpose as described in Options
You can specify useCheckboxes option to show checkboxes, and the tree selection APIs to control and access which node is currently selected.
4 | 5 |By default, parent nodes reflect and control the status of children.
12 |If you wish to override this behaviour, specify useTriState: false in the options.
Node field names are customizable using the following options:
4 |childrenFielddisplayFieldidFieldisExpandedFieldhasChildrenFieldA common use case is to start with the tree expanded completely.
4 |You can achieve this by calling treeModel.expandAll() after view init:
Or to expand / activate specific nodes:
9 | 10 |13 | Filtering on the tree will ensure that if a node is visible, then all its ancestors are also visible. 14 | This is being taken care of by the treeModel 'filterNodes' function. 15 |
16 | 17 |19 | The function receives the node and returns true if the node should be hidden, false otherwise. 20 |
21 |The function filters all nodes whose displayField ('name' by default) contains the given string. The comparison is done case insensitive.
25 |27 | Note the second field - true by default. 28 | This flag makes sure all nodes are visible after searching (i.e. expand all relevant ancestors). 29 |
30 | 31 |
33 | You can traverse the tree and do your own magic, and call hide(), show(), or setIsHidden(value) on all nodes as you wish.
34 |
38 | You can bind to the tree state and supply a dictionary of hidden node IDs. 39 | See 2-way binding to state for more information. 40 |
41 | -------------------------------------------------------------------------------- /projects/docs-app/src/app/guides/filter-guide/filter-guide.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CirclonGroup/angular-tree-component/19b58abe33dcbddbcba80c80ed26babfb7d43a16/projects/docs-app/src/app/guides/filter-guide/filter-guide.component.scss -------------------------------------------------------------------------------- /projects/docs-app/src/app/guides/filter-guide/filter-guide.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FilterGuideComponent } from './filter-guide.component'; 4 | 5 | describe('FilterGuideComponent', () => { 6 | let component: FilterGuideComponent; 7 | let fixture: ComponentFixtureWhen having a large amount of nodes and experiencing performance issues, it is recommended to use the virtual scroll option.
4 |To use this option, one must supply the height of the container, and the height of each node in the tree.
5 |You can also specify height for the dropSlot which is located between nodes.
6 |Example:
7 | 8 |
13 | If the tree is hidden (for example inside tab or modal), it will not be rendered when it becomes visible.
14 | After it becomes visible (preferably using setTimeout) - you need to call tree.sizeChanged(), which recalculates the rendered nodes according to the actual viewport size.
15 |
Initializing 100,000 nodes, please be patient...
19 | 20 |Working with the tree using immutable data is possible.
6 |Make sure that:
7 |id property on each nodeidField in the optionsDrag and drop by default mutates the children.
15 |If working with immutable data, you must override the action and supply your custom behaviour:
16 |Every time the nodes array changes, the entire tree model is rebuilt.
20 |This might be costly if you have a huge amount of nodes that change very frequently.
21 | -------------------------------------------------------------------------------- /projects/docs-app/src/app/guides/redux-guide/redux-guide.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CirclonGroup/angular-tree-component/19b58abe33dcbddbcba80c80ed26babfb7d43a16/projects/docs-app/src/app/guides/redux-guide/redux-guide.component.scss -------------------------------------------------------------------------------- /projects/docs-app/src/app/guides/redux-guide/redux-guide.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ReduxGuideComponent } from './redux-guide.component'; 4 | 5 | describe('ReduxGuideComponent', () => { 6 | let component: ReduxGuideComponent; 7 | let fixture: ComponentFixtureYou can make the tree right to left easily by supplying an 'rtl' boolean option.
3 | 4 |Changing any attributes on the node itself will be reflected immediately, since change detection will force the tree node components to re-render.
5 | 6 |After adding or removing nodes from the tree, one must call the update method on the treeModel for it to take affect.
For example:
9 |This is due to the fact that the treeModel builds its own model around the nodes data, to calculate node levels, paths, parent links etc. So it must be informed of any change to the nodes' structure.
11 |Calling update will have no effect on the tree status, i.e. current selected node, current focused node, current expanded nodes, etc.
12 | 13 |
15 | Changing the reference to nodes will also trigger an update automatically.
16 | So if you work for example with immutable data and replace the nodes array instead of mutating it - there is no need to call any method.
17 |
Powered by the Community. Code licensed under an MIT-style License.
14 | -------------------------------------------------------------------------------- /projects/docs-app/src/app/layout/footer/footer.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: center; 6 | margin: 0 0 40px; 7 | 8 | >* { 9 | color: #fff; 10 | } 11 | } 12 | 13 | .footer-blocks { 14 | display: flex; 15 | justify-content: center; 16 | text-align: left; 17 | margin: 0 0 40px; 18 | } 19 | 20 | .footer-block { 21 | margin: 0 24px; 22 | vertical-align: top; 23 | } 24 | 25 | a { 26 | color: #fff; 27 | } 28 | 29 | h3 { 30 | color: #fff; 31 | text-transform: uppercase; 32 | } 33 | 34 | ul { 35 | margin: 0; 36 | padding: 0; 37 | 38 | li { 39 | list-style-type: none; 40 | padding: 4px 0; 41 | text-align: left; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /projects/docs-app/src/app/layout/footer/footer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { FooterComponent } from './footer.component'; 4 | 5 | describe('FooterComponent', () => { 6 | let component: FooterComponent; 7 | let fixture: ComponentFixture2 | actions works! 3 |
4 | -------------------------------------------------------------------------------- /projects/example-app/src/app/actions/actions.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { ActionsComponent } from './actions.component'; 4 | 5 | describe('ActionsComponent', () => { 6 | let component: ActionsComponent; 7 | let fixture: ComponentFixture2 | api works! 3 |
4 | -------------------------------------------------------------------------------- /projects/example-app/src/app/api/api.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { ApiComponent } from './api.component'; 4 | 5 | describe('ApiComponent', () => { 6 | let component: ApiComponent; 7 | let fixture: ComponentFixtureKeys:
9 | down | up | left | right | space | enter 10 | `, 11 | styles: [] 12 | }) 13 | export class BasicTreeComponent { 14 | nodes = [ 15 | { 16 | name: 'root1', 17 | children: [ 18 | { name: 'child1' }, 19 | { name: 'child2' } 20 | ] 21 | }, 22 | { 23 | name: 'root2', 24 | children: [ 25 | { name: 'child2.1', children: [] }, 26 | { name: 'child2.2', children: [ 27 | {name: 'grandchild2.2.1'} 28 | ] } 29 | ] 30 | }, 31 | { name: 'root3' }, 32 | { name: 'root4', children: [] }, 33 | { name: 'root5', children: null } 34 | ]; 35 | } 36 | -------------------------------------------------------------------------------- /projects/example-app/src/app/checkboxes/checkboxes.component.ts: -------------------------------------------------------------------------------- 1 | import { ITreeOptions } from 'angular-tree-component'; 2 | import { Component } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'app-checkboxes', 6 | template: ` 7 |2 | contextmenu works! 3 |
4 | -------------------------------------------------------------------------------- /projects/example-app/src/app/contextmenu/contextmenu.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { ContextmenuComponent } from './contextmenu.component'; 4 | 5 | describe('ContextmenuComponent', () => { 6 | let component: ContextmenuComponent; 7 | let fixture: ComponentFixture2 | virtualscroll works! 3 |
4 | -------------------------------------------------------------------------------- /projects/example-app/src/app/virtualscroll/virtualscroll.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | 3 | import { VirtualscrollComponent } from './virtualscroll.component'; 4 | 5 | describe('VirtualscrollComponent', () => { 6 | let component: VirtualscrollComponent; 7 | let fixture: ComponentFixture