+ [item]='element' class='draggable-item' (click)="submitClick(element)" (mouseenter)="submitMouseenter(element, $event)" (mouseleave)="submitMouseleave(element, $event)">
{{element.name}}
diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts
index 5d33fab..8fac94c 100644
--- a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts
+++ b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts
@@ -95,6 +95,33 @@ export class NgxTreeChildrenComponent implements AfterViewInit {
});
}
+ /*
+ Event: onClick;
+ Element was clicked
+ Call click() from tree service.
+ */
+ submitClick(element) {
+ this.treeService.clickItem(element);
+ }
+
+ /*
+ Event: onMouseEnter;
+ Element was triggered
+ Call mouseEnter() from tree service.
+ */
+ submitMouseenter(element, event) {
+ this.treeService.mouseEnterItem(element, event);
+ }
+
+ /*
+ Event: onMouseLeave;
+ Element was triggered
+ Call mouseLeave() from tree service.
+ */
+ submitMouseleave(element, event) {
+ this.treeService.mouseLeaveItem(element, event);
+ }
+
/*
Event: onStartRenameItem;
Enable rename mode in element
diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts
index 8222efc..a1a0f2d 100644
--- a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts
+++ b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts
@@ -42,6 +42,9 @@ export class NgxTreeParentComponent implements AfterViewInit {
@Output() onallowdrop: EventEmitter = new EventEmitter();
@Output() ondragend: EventEmitter = new EventEmitter();
@Output() onadditem: EventEmitter = new EventEmitter();
+ @Output() onClickItem: EventEmitter = new EventEmitter();
+ @Output() onMouseEnterItem: EventEmitter = new EventEmitter();
+ @Output() onMouseLeaveItem: EventEmitter = new EventEmitter();
@Output() onStartRenameItem: EventEmitter = new EventEmitter();
@Output() onFinishRenameItem: EventEmitter = new EventEmitter();
@Output() onStartDeleteItem: EventEmitter = new EventEmitter();
@@ -115,6 +118,21 @@ export class NgxTreeParentComponent implements AfterViewInit {
this.onadditem.emit(event);
}
);
+ this.treeService.onClickItem.subscribe(
+ (event) => {
+ this.onClickItem.emit(event);
+ }
+ );
+ this.treeService.onMouseEnterItem.subscribe(
+ (event) => {
+ this.onMouseEnterItem.emit(event);
+ }
+ );
+ this.treeService.onMouseLeaveItem.subscribe(
+ (event) => {
+ this.onMouseLeaveItem.emit(event);
+ }
+ );
this.treeService.onStartRenameItem.subscribe(
(event) => {
this.onStartRenameItem.emit(event);
diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts
index cf98ae9..286e8ec 100644
--- a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts
+++ b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts
@@ -27,6 +27,9 @@ export class NgxTreeService {
onDrag = new Subject();
onAllowDrop = new Subject();
onDragEnd = new Subject();
+ onClickItem = new Subject();
+ onMouseEnterItem = new Subject();
+ onMouseLeaveItem = new Subject();
onAddItem = new Subject();
onRenameItem = new Subject();
onStartRenameItem = new Subject();
@@ -166,6 +169,43 @@ export class NgxTreeService {
this.clearAction();
}
+ /*
+ Trigger click on element.
+ It`s accepts 'name' and 'id' for find item on tree and set the name.
+ Emit onClickItem Subject.
+ */
+ public clickItem(element) {
+ this.elementFinder(this.treeStorage, element.id);
+ // event emit
+ const eventEmit = {
+ element: this.findingResults.foundItem,
+ parent: this.findingResults.parentItem || 'root'
+ };
+ this.onClickItem.next(eventEmit);
+ }
+
+ public mouseEnterItem(element, event) {
+ this.elementFinder(this.treeStorage, element.id);
+ // event emit
+ const eventEmit = {
+ event: event,
+ element: this.findingResults.foundItem,
+ parent: this.findingResults.parentItem || 'root'
+ };
+ this.onMouseEnterItem.next(eventEmit);
+ }
+
+ public mouseLeaveItem(element, event) {
+ this.elementFinder(this.treeStorage, element.id);
+ // event emit
+ const eventEmit = {
+ event: event,
+ element: this.findingResults.foundItem,
+ parent: this.findingResults.parentItem || 'root'
+ };
+ this.onMouseLeaveItem.next(eventEmit);
+ }
+
/*
Trigger start rename element.
It`s accepts 'name' and 'id' for find item on tree and set the name.
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0d2fe4a..ae04a06 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,6 +3,9 @@