From 7a9a9efeac453f369f71ed827fd0f021f0bcd52e Mon Sep 17 00:00:00 2001
From: bnymncoskuner <bnymncoskuner@gmail.com>
Date: Sun, 13 Sep 2020 19:12:56 +0300
Subject: [PATCH] feat: add custom node template for tree component

---
 .../tree/src/lib/components/tree.component.html          | 9 ++++++++-
 .../components/tree/src/lib/components/tree.component.ts | 2 ++
 .../src/lib/templates/tree-node-template.directive.ts    | 8 ++++++++
 .../packages/components/tree/src/lib/tree.module.ts      | 9 ++++++---
 npm/ng-packs/packages/components/tree/src/public-api.ts  | 1 +
 5 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
index b7c777a449..f575a5f44b 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
@@ -18,7 +18,14 @@
     [title]="node.title"
     (click)="onSelectedNodeChange(node)"
   >
-    <span>{{ node.title }}</span>
+    <ng-container *ngIf="customNodeTemplate; else defaultNodeTemplate">
+      <ng-container
+        *ngTemplateOutlet="customNodeTemplate.template; context: { $implicit: node }"
+      ></ng-container>
+    </ng-container>
+    <ng-template #defaultNodeTemplate>
+      <span>{{ node.title }}</span>
+    </ng-template>
 
     <div *ngIf="menu" class="ellipsis" ngbDropdown placement="bottom" container="body">
       <i class="fas fa-ellipsis-h" ngbDropdownToggle [class.dropdown-toggle]="false"></i>
diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
index ac7a709048..baf919c39b 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import { NzFormatEmitEvent, NzFormatBeforeDropEvent } from 'ng-zorro-antd/tree';
 import { of } from 'rxjs';
+import { TreeNodeTemplateDirective } from '../templates/tree-node-template.directive';
 
 export type DropEvent = NzFormatEmitEvent & { pos: number };
 
@@ -25,6 +26,7 @@ export class TreeComponent {
   dropPosition: number;
 
   @ContentChild('menu') menu: TemplateRef<any>;
+  @ContentChild(TreeNodeTemplateDirective) customNodeTemplate: TreeNodeTemplateDirective;
   @Output() readonly checkedKeysChange = new EventEmitter();
   @Output() readonly expandedKeysChange = new EventEmitter<string[]>();
   @Output() readonly selectedNodeChange = new EventEmitter();
diff --git a/npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts b/npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts
new file mode 100644
index 0000000000..56c66af04b
--- /dev/null
+++ b/npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts
@@ -0,0 +1,8 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[abpTreeNodeTemplate],[abp-tree-node-template]',
+})
+export class TreeNodeTemplateDirective {
+  constructor(public template: TemplateRef<any>) {}
+}
diff --git a/npm/ng-packs/packages/components/tree/src/lib/tree.module.ts b/npm/ng-packs/packages/components/tree/src/lib/tree.module.ts
index f16ed0dd55..feb806f7b3 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/tree.module.ts
+++ b/npm/ng-packs/packages/components/tree/src/lib/tree.module.ts
@@ -1,12 +1,15 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { NzTreeModule } from 'ng-zorro-antd/tree';
 import { TreeComponent } from './components/tree.component';
-import { CommonModule } from '@angular/common';
+import { TreeNodeTemplateDirective } from './templates/tree-node-template.directive';
+
+const exported = [TreeNodeTemplateDirective, TreeComponent];
 
 @NgModule({
   imports: [CommonModule, NzTreeModule, NgbDropdownModule],
-  exports: [TreeComponent],
-  declarations: [TreeComponent],
+  exports: [...exported],
+  declarations: [...exported],
 })
 export class TreeModule {}
diff --git a/npm/ng-packs/packages/components/tree/src/public-api.ts b/npm/ng-packs/packages/components/tree/src/public-api.ts
index df82ac0f93..09f2f16d0e 100644
--- a/npm/ng-packs/packages/components/tree/src/public-api.ts
+++ b/npm/ng-packs/packages/components/tree/src/public-api.ts
@@ -1,3 +1,4 @@
 export * from './lib/tree.module';
 export * from './lib/components/tree.component';
 export * from './lib/utils/nz-tree-adapter';
+export * from './lib/templates/tree-node-template.directive';