@cluetec/ngcx-tree 16.0.1 → 16.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -8
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,11 +1,30 @@
|
|
|
1
1
|
A reusable tree component for Angular based on the CDK Tree and the CDK Drag n
|
|
2
2
|
Drop features.
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
Includes only peer dependencies to angular cdk, no other library included. So
|
|
5
|
+
the lib size is pretty small.
|
|
6
|
+
|
|
7
|
+
# Feature Overview
|
|
8
|
+
|
|
9
|
+
- Highly custumizable tree component
|
|
10
|
+
- Configure your Angular Template for node rendering
|
|
11
|
+
- Or configure your own component for node rendering
|
|
12
|
+
- Selection state
|
|
13
|
+
- configure which nodes are selectable
|
|
14
|
+
- Drag and Drop
|
|
15
|
+
- configure which nodes may be moved
|
|
16
|
+
- configure where a node can be dropped
|
|
17
|
+
- Events (always with detailed information about parents, next or prev. nodes):
|
|
18
|
+
- On move
|
|
19
|
+
- On click
|
|
20
|
+
- On select/unselect
|
|
21
|
+
- custom event may be emitted by custom component
|
|
22
|
+
|
|
23
|
+
Missing features? Let me know :)
|
|
6
24
|
|
|
7
25
|
# Table of Content
|
|
8
26
|
|
|
27
|
+
- [Feature Overview](#feature-overview)
|
|
9
28
|
- [Table of Content](#table-of-content)
|
|
10
29
|
- [Getting Started](#getting-started)
|
|
11
30
|
- [Prerequisites](#prerequisites)
|
|
@@ -73,7 +92,7 @@ export class AppModule {}
|
|
|
73
92
|
|
|
74
93
|
# Prerequisites
|
|
75
94
|
|
|
76
|
-
You need at least angular 16 to use the tree.
|
|
95
|
+
You need at least angular 16 to use the tree.
|
|
77
96
|
|
|
78
97
|
<br><br>
|
|
79
98
|
|
|
@@ -87,7 +106,7 @@ You need at least angular 16 to use the tree.
|
|
|
87
106
|
# Outputs
|
|
88
107
|
|
|
89
108
|
| Property | event content type | Description |
|
|
90
|
-
| ----------- |
|
|
109
|
+
| ----------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------- |
|
|
91
110
|
| nodeMoved | [NgcxTreeNodeMovedEvent](#NgcxTreeNodeMovedEvent) | fired when a node is moved |
|
|
92
111
|
| customEvent | any | may be fired by your own custom component |
|
|
93
112
|
| clickEvent | [NgcxTreeNodeWrapper](#NgcxTreeNodeWrapper) | fired when node is clicked |
|
|
@@ -176,7 +195,7 @@ Your component can implement this interface and can be set as
|
|
|
176
195
|
Access api like this
|
|
177
196
|
|
|
178
197
|
````ts
|
|
179
|
-
import { ViewChild, Component} from '@angular/core';
|
|
198
|
+
import { ViewChild, Component } from '@angular/core';
|
|
180
199
|
import { NgcxTreeComponent, NgcxTreeNode } from '@cluetec/ngcx-tree';
|
|
181
200
|
|
|
182
201
|
@Component({
|
|
@@ -269,9 +288,9 @@ Import or copy the scss to set the color of the node icon:
|
|
|
269
288
|
|
|
270
289
|
## Font Awesome
|
|
271
290
|
|
|
272
|
-
Font Awesome is not
|
|
273
|
-
|
|
274
|
-
|
|
291
|
+
Font Awesome is not included here, but to show icons for the nodes you may
|
|
292
|
+
include font-awesome on your own and may use the `node.faIcon` property to set
|
|
293
|
+
the icon.
|
|
275
294
|
|
|
276
295
|
Include like this:
|
|
277
296
|
[projects/ngcx-tree/stories/styles/styles.scss](projects/ngcx-tree/stories/styles/styles.scss)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cluetec/ngcx-tree",
|
|
3
|
-
"version": "16.0.
|
|
3
|
+
"version": "16.0.2",
|
|
4
4
|
"description": "An angular tree component with drag and drop.",
|
|
5
5
|
"author": "Michael Niedermaier <mn@cluetec.de>",
|
|
6
6
|
"repository": "https://github.com/cluetec/ngcx-tree",
|
|
@@ -28,7 +28,8 @@
|
|
|
28
28
|
"cluetec",
|
|
29
29
|
"ngcx",
|
|
30
30
|
"ngx",
|
|
31
|
-
"cx"
|
|
31
|
+
"cx",
|
|
32
|
+
"component"
|
|
32
33
|
],
|
|
33
34
|
"module": "fesm2022/cluetec-ngcx-tree.mjs",
|
|
34
35
|
"typings": "index.d.ts",
|