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)"
>
- {{ node.title }}
+
+
+
+
+ {{ node.title }}
+
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
;
+ @ContentChild(TreeNodeTemplateDirective) customNodeTemplate: TreeNodeTemplateDirective;
@Output() readonly checkedKeysChange = new EventEmitter();
@Output() readonly expandedKeysChange = new EventEmitter();
@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) {}
+}
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';