Angular mat-tree with ng-template

Question

<app-test-node [nestedDataSource]="nestedDataSource" [nestedTreeControl]="nestedTreeControl" [template]="nodetemp" [template2]="nestednodetemp">
</app-test-node>


<ng-template let-node="data" #nodetemp>
  <li class="mat-tree-node">
    <button mat-icon-button disabled></button>
    {{node.filename}}:  {{node.type}}
  </li>
</ng-template>

<ng-template let-node="data" #nestednodetemp>
  <li>
    <div class="mat-tree-node">
      <button mat-icon-button matTreeNodeToggle
              [attr.aria-label]="'toggle ' + node.filename">
        <mat-icon class="mat-icon-rtl-mirror">
          {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      {{node.filename}}
    </div>
    <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
    </ul>
  </li>
</ng-template>

Trying to pass tree node template to the following component:

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">

  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
     <ng-container  [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{data: node}"></ng-container>
  </mat-tree-node>

  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <ng-container  [ngTemplateOutlet]="template2" [ngTemplateOutletContext]="{data: node}"></ng-container>
  </mat-nested-tree-node>

</mat-tree>

the problem is the matTreeNodeToggle directive, when i add it to the button in the template i get the following error:

ERROR Error: StaticInjectorError(AppModule)[MatNestedTreeNode -> CdkTree]: StaticInjectorError(Platform: core)[MatNestedTreeNode -> CdkTree]: NullInjectorError: No provider for CdkTree! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062) at resolveToken (core.js:1300) at tryResolveToken (core.js:1244) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141) at resolveToken (core.js:1300) at tryResolveToken (core.js:1244) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141) at resolveNgModuleDep (core.js:8369) at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9057) at resolveDep (core.js:9422)

This is a dependency injection issue. MatNestedTreeNodeis is not provided by your component or one of its parent. Can you post the .ts of your component? — Baboo
– Baboo, Commented Sep 22, 2018 at 21:20
this code is sligthly modified material tree example (material.angular.io/components/tree/examples) the outer ts is original not modified and the ts of the container is @Input() nestedTreeControl: NestedTreeControl<FileNode>; @Input() nestedDataSource: MatTreeNestedDataSource<FileNode>; @Input() template; @Input() template2; hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type; — Alex
– Alex, Commented Sep 24, 2018 at 17:21
The thing is when i remove the matTreeNodeToggle directive from the ng-template button it works fine — Alex
– Alex, Commented Sep 24, 2018 at 17:29

Felix · Accepted Answer · 2022-07-06 07:00:49Z

8

You probably solved this by now, but for other people who ran into the same problem: The directive is nothing more than a click event which calls toggle (src). This means you can simply replace the matTreeNodeToggle with (click)="treeControl.toggle(node)".

edited Jul 6, 2022 at 7:00

answered Mar 18, 2020 at 10:18

Felix

1,59612 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chen Reuven Over a year ago

Thanks a lot!!! you are the men!! saved me hours of invistigation!!!

Nyerguds Over a year ago

Peculiar. When I tried taking control of this with my own function, it always got two events; one that expanded the clicked node, and a second that collapsed that node's highest-level parent in the tree. Not sure what caused that.

Radovan Skendzic · Accepted Answer · 2020-06-11 08:59:27Z

0

Try adding CdkTree and CdkTreeNode in your component's providers list.

answered Jun 11, 2020 at 8:59

Radovan Skendzic

3,0091 gold badge17 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular mat-tree with ng-template

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related