feat: add custom node template for tree component

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>

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();

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>) {}
+}

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],
+  exports: [...exported],
-  declarations: [TreeComponent],
+  declarations: [...exported],
 })
 export class TreeModule {}

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';