CODEWITHSUNDEEP
angular
Alex
Alex

Reputation: 51

Angular mat-tree with ng-template

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

Upvotes: 5

Views: 4662

Answers (2)

Felix
Felix

Reputation: 1566

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)".

Upvotes: 8

Radovan Skendzic
Radovan Skendzic

Reputation: 2999

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

Upvotes: 0

Related Questions