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 1/2] 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';

From e6bce37fb054d987ed70de81ded907113a23c820 Mon Sep 17 00:00:00 2001
From: bnymncoskuner <bnymncoskuner@gmail.com>
Date: Mon, 14 Sep 2020 10:03:45 +0300
Subject: [PATCH 2/2] feat: add icon template to tree component

---
 .../tree/src/lib/components/tree.component.html     | 13 ++++++++-----
 .../tree/src/lib/components/tree.component.ts       |  2 ++
 .../templates/expanded-icon-template.directive.ts   |  8 ++++++++
 .../packages/components/tree/src/lib/tree.module.ts |  5 ++++-
 .../packages/components/tree/src/public-api.ts      |  1 +
 5 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-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 f575a5f44b..b98aa7e4ff 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
@@ -7,6 +7,7 @@
   [nzData]="nodes"
   [nzTreeTemplate]="treeTemplate"
   [nzExpandedKeys]="expandedKeys"
+  [nzExpandedIcon]="expandedIconTemplate?.template"
   (nzExpandChange)="onExpandedKeysChange($event)"
   (nzCheckBoxChange)="onCheckboxChange($event)"
   (nzOnDrop)="onDrop($event)"
@@ -18,11 +19,13 @@
     [title]="node.title"
     (click)="onSelectedNodeChange(node)"
   >
-    <ng-container *ngIf="customNodeTemplate; else defaultNodeTemplate">
-      <ng-container
-        *ngTemplateOutlet="customNodeTemplate.template; context: { $implicit: node }"
-      ></ng-container>
-    </ng-container>
+    <ng-container
+      *ngTemplateOutlet="
+        customNodeTemplate?.template || defaultNodeTemplate;
+        context: { $implicit: node }
+      "
+    ></ng-container>
+
     <ng-template #defaultNodeTemplate>
       <span>{{ node.title }}</span>
     </ng-template>
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 baf919c39b..7ba6280c0b 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
@@ -10,6 +10,7 @@ import {
 import { NzFormatEmitEvent, NzFormatBeforeDropEvent } from 'ng-zorro-antd/tree';
 import { of } from 'rxjs';
 import { TreeNodeTemplateDirective } from '../templates/tree-node-template.directive';
+import { ExpandedIconTemplateDirective } from '../templates/expanded-icon-template.directive';
 
 export type DropEvent = NzFormatEmitEvent & { pos: number };
 
@@ -27,6 +28,7 @@ export class TreeComponent {
 
   @ContentChild('menu') menu: TemplateRef<any>;
   @ContentChild(TreeNodeTemplateDirective) customNodeTemplate: TreeNodeTemplateDirective;
+  @ContentChild(ExpandedIconTemplateDirective) expandedIconTemplate: ExpandedIconTemplateDirective;
   @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/expanded-icon-template.directive.ts b/npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-template.directive.ts
new file mode 100644
index 0000000000..35706bd25f
--- /dev/null
+++ b/npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-template.directive.ts
@@ -0,0 +1,8 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[abpTreeExpandedIconTemplate],[abp-tree-expanded-icon-template]',
+})
+export class ExpandedIconTemplateDirective {
+  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 feb806f7b3..b645a69925 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
@@ -4,8 +4,11 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { NzTreeModule } from 'ng-zorro-antd/tree';
 import { TreeComponent } from './components/tree.component';
 import { TreeNodeTemplateDirective } from './templates/tree-node-template.directive';
+import { ExpandedIconTemplateDirective } from './templates/expanded-icon-template.directive';
 
-const exported = [TreeNodeTemplateDirective, TreeComponent];
+const templates = [TreeNodeTemplateDirective, ExpandedIconTemplateDirective];
+
+const exported = [...templates, TreeComponent];
 
 @NgModule({
   imports: [CommonModule, NzTreeModule, NgbDropdownModule],
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 09f2f16d0e..1f3dd48e00 100644
--- a/npm/ng-packs/packages/components/tree/src/public-api.ts
+++ b/npm/ng-packs/packages/components/tree/src/public-api.ts
@@ -2,3 +2,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';
+export * from './lib/templates/expanded-icon-template.directive';