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