You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[select - selects a node](#select---selects-a-node)
30
-
-[isSelected - checks whether a node is selected](#isselected---checks-whether-a-node-is-selected)
31
-
-[collapse - collapses a node](#collapse---collapses-a-node)
32
-
-[isCollapsed - check whether a node is collapsed](#iscollapsed---check-whether-a-node-is-collapsed)
33
-
-[expand - expands a node](#expand---expands-a-node)
34
-
-[isExpanded - checks whether a node is expanded](#isexpanded---checks-whether-a-node-is-expanded)
35
-
-[toTreeModel - converts a tree to a TreeModel instance](#totreemodel---converts-a-tree-to-a-treemodel-instance)
36
-
-[rename - renames a node (changes its value underneath)](#rename---renames-a-node-changes-its-value-underneath)
37
-
-[startRenaming - changes the node template so that text input appears and lets a user type a new name](#startrenaming---changes-the-node-template-so-that-text-input-appears-and-lets-a-user-type-a-new-name)
38
-
-[remove - removes a node from the tree](#remove---removes-a-node-from-the-tree)
39
-
-[addChild - creates a new child node](#addchild---creates-a-new-child-node)
-[reloadChildren - loads async children once more](#reloadchildren---loads-async-children-once-more)
42
-
-[setChildren - changes children of a node;](#setchildren---changes-children-of-a-node)
43
-
-[SystemJS](#systemjs)
44
-
-[Changes that should be taken into account in order to migrate from __ng2-tree V1__ to __ng2-tree V2__](#changes-that-should-be-taken-into-account-in-order-to-migrate-from-__ng2-tree-v1__-to-__ng2-tree-v2__)
45
-
-[:bulb: Want to help?](#bulb-want-to-help)
9
+
*[:clapper: Usage](#clapper-usage)
10
+
*[:eyes: Demo](#eyes-demo)
11
+
*[:wrench: API](#wrench-api)
12
+
*[tree](#tree)
13
+
*[[tree]](#tree)
14
+
*[Load children asynchronously](#load-children-asynchronously)
15
+
*[Load children using ngrx (or any redux-like library)](#load-children-using-ngrx-or-any-redux-like-library)
16
+
*[Configure node via TreeModelSettings](#configure-node-via-treemodelsettings)
*[select - selects a node](#select---selects-a-node)
30
+
*[isSelected - checks whether a node is selected](#isselected---checks-whether-a-node-is-selected)
31
+
*[collapse - collapses a node](#collapse---collapses-a-node)
32
+
*[isCollapsed - check whether a node is collapsed](#iscollapsed---check-whether-a-node-is-collapsed)
33
+
*[expand - expands a node](#expand---expands-a-node)
34
+
*[isExpanded - checks whether a node is expanded](#isexpanded---checks-whether-a-node-is-expanded)
35
+
*[toTreeModel - converts a tree to a TreeModel instance](#totreemodel---converts-a-tree-to-a-treemodel-instance)
36
+
*[rename - renames a node (changes its value underneath)](#rename---renames-a-node-changes-its-value-underneath)
37
+
*[startRenaming - changes the node template so that text input appears and lets a user type a new name](#startrenaming---changes-the-node-template-so-that-text-input-appears-and-lets-a-user-type-a-new-name)
38
+
*[remove - removes a node from the tree](#remove---removes-a-node-from-the-tree)
39
+
*[addChild - creates a new child node](#addchild---creates-a-new-child-node)
*[reloadChildren - loads async children once more](#reloadchildren---loads-async-children-once-more)
42
+
*[setChildren - changes children of a node;](#setchildren---changes-children-of-a-node)
43
+
*[SystemJS](#systemjs)
44
+
*[Changes that should be taken into account in order to migrate from **ng2-tree V1** to **ng2-tree V2**](#changes-that-should-be-taken-into-account-in-order-to-migrate-from-__ng2-tree-v1__-to-__ng2-tree-v2__)
45
+
*[:bulb: Want to help?](#bulb-want-to-help)
46
46
47
47
<!-- /TOC -->
48
48
49
49
## :clapper: Usage
50
+
50
51
Ok, let's start with an installation - all you need to do is:
51
52
52
53
`npm install --save ng2-tree`
@@ -63,11 +64,10 @@ import { TreeModule } from 'ng2-tree';
63
64
64
65
@NgModule({
65
66
declarations: [MyComponent],
66
-
imports: [BrowserModule, TreeModule],
67
-
bootstrap: [MyComponent]
67
+
imports: [BrowserModule, TreeModule],
68
+
bootstrap: [MyComponent]
68
69
})
69
-
exportclassMyModule {
70
-
}
70
+
exportclassMyModule {}
71
71
```
72
72
73
73
2. As soon as the previous step is done we need to give ng2-tree a model to render - this can be accomplished by populating its `[tree]` attribute with an object that conforms to the `TreeModel` interface (see [API](#wrench-api)):
In Angular 2/4 cli projects, modify **.angular-cli.json** as below:
113
105
114
106
```typescript
115
-
116
107
"styles": [
117
108
"styles.css",
118
109
"../node_modules/ng2-tree/styles.css"
119
110
],
120
111
```
112
+
121
113
4. And finally, I suppose, you'd want to listen to events generated by ng2-tree (for a full list of supported events look at the [API](#wrench-api)). No problem, this is also easy to do - for example let's add a listener for `node was selected` kind of events:
122
114
123
115
```typescript
@@ -138,15 +130,17 @@ class MyComponent {
138
130
}
139
131
}
140
132
```
133
+
141
134
Voila! That's pretty much it - enjoy :blush:
142
135
143
136
## :eyes: Demo
137
+
144
138
Feel free to examine the [demo](https://valor-software.github.io/ng2-tree/index.html) and its [sources](src/demo) to find out how things are wired.
145
139
Also, there is [another demo built with Angular CLI](https://github.com/rychkog/ng2-tree-demo).
146
140
147
141
## :wrench: API
148
142
149
-
Here is the fully stuffed *tree* tag that you can use in your templates:
143
+
Here is the fully stuffed _tree_ tag that you can use in your templates:
150
144
151
145
```html
152
146
<tree
@@ -271,7 +265,7 @@ Here is an example of such a node in the `TreeModel` object:
271
265
272
266
#### Load children asynchronously
273
267
274
-
Another worth noting thing is `loadChildren`. This function on `TreeModel` allows you to load its __children asynchronously__.
268
+
Another worth noting thing is `loadChildren`. This function on `TreeModel` allows you to load its **children asynchronously**.
275
269
276
270
```typescript
277
271
{
@@ -296,21 +290,21 @@ If `loadChildren` function is given to the node - `children` property is ignored
296
290
You can also load children by changing the tree state using ngrx.
297
291
The tree can emit an appropriate event notifying you to dispatch a new action in order to load the branch's children.
298
292
299
-
To enable this feature you should set the ```TreeModel.emitLoadNextLevel``` property to true:
293
+
To enable this feature you should set the `TreeModel.emitLoadNextLevel` property to true:
300
294
301
-
```typscript
302
-
const model: TreeModel = {
303
-
emitLoadNextLevel : true
304
-
}
305
-
```
295
+
```typscript
296
+
const model: TreeModel = {
297
+
emitLoadNextLevel : true
298
+
}
299
+
```
306
300
307
-
Now on the first time the node is expanded a __LoadNextLevelEvent__ will be fired (via the __loadNextLevel__ EventEmitter in the tree) containing the node that requested a next level (its children) loading.
301
+
Now on the first time the node is expanded a **LoadNextLevelEvent** will be fired (via the **loadNextLevel** EventEmitter in the tree) containing the node that requested a next level (its children) loading.
308
302
309
303
In your code make sure you change the tree state and add the children to the model.
310
304
311
-
In addition the regular __NodeExpanded__ event will be fired.
305
+
In addition the regular **NodeExpanded** event will be fired.
312
306
313
-
__NOTICE__: if both ```emitLoadNextLevel``` and ```loadChildren``` are provided, the tree will ignore the ```emitLoadNextLevel``` and the ```LoadNextLevelEvent``` won't be fired.
307
+
**NOTICE**: if both `emitLoadNextLevel` and `loadChildren` are provided, the tree will ignore the `emitLoadNextLevel` and the `LoadNextLevelEvent` won't be fired.
314
308
315
309
#### Configure node via TreeModelSettings
316
310
@@ -370,12 +364,12 @@ All options that are defined on a `parent` are automatically applied to children
370
364
371
365
### [settings]
372
366
373
-
Object that should be passed to `[settings]` must be of type [`Ng2TreeSettings`](src/tree.types.ts). This attribute is __optional__. Right now only one setting is available in there - `rootIsVisible`. This setting allows you to make a root node of the tree _invisible_:
367
+
Object that should be passed to `[settings]` must be of type [`Ng2TreeSettings`](src/tree.types.ts). This attribute is **optional**. Right now only one setting is available in there - `rootIsVisible`. This setting allows you to make a root node of the tree _invisible_:
374
368
375
369
```typescript
376
370
const treeSettings:Ng2TreeSettings= {
377
371
rootIsVisible: false
378
-
}
372
+
};
379
373
```
380
374
381
375
By default `rootIsVisible` equals to `true`
@@ -420,8 +414,8 @@ You can subscribe to `NodeMovedEvent` by attaching listener to `(nodeMoved)` att
420
414
421
415
`NodeMovedEvent` has two properties `node` and `previousParent` both of which contain `Tree` objects:
422
416
423
-
-`node` contains a moved node;
424
-
-`previousParent` contains a previous parent of the moved node;
417
+
*`node` contains a moved node;
418
+
*`previousParent` contains a previous parent of the moved node;
425
419
426
420
```typescript
427
421
{node: <Tree>{...}, previousParent: <Tree>{...}}
@@ -474,9 +468,9 @@ You can subscribe to `NodeRenamedEvent` by attaching listener to `(nodeRenamed)`
474
468
475
469
`NodeRenamedEvent` has three properties:
476
470
477
-
-`node` contains a node that was renamed ( an instance of `Tree`).
478
-
-`oldValue` contains a value, that node used to have (it might be `string` or `RenamableNode`)
479
-
-`newValue` contains a new value of the node (it might be `string` or `RenamableNode`)
471
+
*`node` contains a node that was renamed ( an instance of `Tree`).
472
+
*`oldValue` contains a value, that node used to have (it might be `string` or `RenamableNode`)
473
+
*`newValue` contains a new value of the node (it might be `string` or `RenamableNode`)
480
474
481
475
```typescript
482
476
{
@@ -539,6 +533,7 @@ Relevant for loading children via ngrx (or any redux-inspired library).
539
533
```
540
534
541
535
## :gun: Controller
536
+
542
537
First of all you should know how to get a controller of a particular node. You can get a controller of a node only if you set an id property of a node.
543
538
544
539
> TIP: Ids for nodes created via the context menu or using a TreeController instance get populated automatically unless nodes had ids before there were added to the tree
@@ -661,6 +656,16 @@ oopNodeController.expand();
661
656
662
657
This method expands the node in case it can be expanded. On successful expanding the expand event is fired.
663
658
659
+
#### expandToParent - expands a node and its parents up to the root
660
+
661
+
```typescript
662
+
oopNodeController.expandToParent();
663
+
```
664
+
665
+
This method expands the node even if it is a leaf. Expand event is fired for every expanded parent up to the root.
666
+
667
+
**Important:** For this to work - `keepNodesInDOM: true` should be set on the appropriate tree.
668
+
664
669
#### isExpanded - checks whether a node is expanded
This method replaces all existing children of the node with new ones.
742
747
743
748
## SystemJS
749
+
744
750
If you are using SystemJS, then you need
745
751
746
752
```javascript
@@ -755,12 +761,13 @@ System.config({
755
761
}
756
762
```
757
763
758
-
## Changes that should be taken into account in order to migrate from __ng2-tree V1__ to __ng2-tree V2__
759
-
- Events were reworked:
760
-
- In V1 all events that were inherited from NodeDestructiveEvent used to have property `parent`. It's not the case anymore. If you need a parent you should get it from `node` in event object like `node.parent`;
761
-
- All events used to have `node` property of type `TreeModel`. Now `node` is of type [Tree](#tree-class) (as well as `node.parent`);
762
-
- `NodeMovedEvent` now has property `previousParent`, which contains tree in which moved node used to be.
763
-
- CSS styles in __ng2-tree V2__ are distributed as separate file which you can find in `node_modules/ng2-tree/styles.css`. That allows you to override ng2-tree styles more easily.
764
+
## Changes that should be taken into account in order to migrate from **ng2-tree V1** to **ng2-tree V2**
765
+
766
+
* Events were reworked:
767
+
* In V1 all events that were inherited from NodeDestructiveEvent used to have property `parent`. It's not the case anymore. If you need a parent you should get it from `node` in event object like `node.parent`;
768
+
* All events used to have `node` property of type `TreeModel`. Now `node` is of type [Tree](#tree-class) (as well as `node.parent`);
769
+
* `NodeMovedEvent` now has property `previousParent`, which contains tree in which moved node used to be.
770
+
* CSS styles in **ng2-tree V2** are distributed as separate file which you can find in `node_modules/ng2-tree/styles.css`. That allows you to override ng2-tree styles more easily.
0 commit comments