Merge pull request #5384 from abpframework/feat/5381

feat: add custom node template for tree component

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,7 +19,16 @@
     [title]="node.title"
     (click)="onSelectedNodeChange(node)"
   >
-    <span>{{ node.title }}</span>
+    <ng-container
+      *ngTemplateOutlet="
+        customNodeTemplate?.template || defaultNodeTemplate;
+        context: { $implicit: node }
+      "
+    ></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,8 @@ import {
 } from '@angular/core';
 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 };
 
@@ -25,6 +27,8 @@ export class TreeComponent {
   dropPosition: number;
 
   @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();

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

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,18 @@
+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';
+import { ExpandedIconTemplateDirective } from './templates/expanded-icon-template.directive';
+
+const templates = [TreeNodeTemplateDirective, ExpandedIconTemplateDirective];
+
+const exported = [...templates, 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,5 @@
 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';