Angular Material: Tree node counting

Question

There are several examples for the Angular Material tree implemenation. What I did not find is a sample how to add automatically a counter for each level. e.g.

1 Groceries
  1 Almond Meal flour
  2 Organic eggs
  3 Protein Powder
  4 Fruits
    1 Apple
    2 Berries
    3 Orange
2 Reminders

and more or less collapsed

1 Groceries
   1 Almond Meal flour
   2 Organic eggs
   3 Protein Powder
 v 4 Fruits
2 Reminders

I know I can add a counter during the setup of the nodes. But since I want to reorder the structure with DnD it would be great if this could be accomplished dynamically in the html code. Any ideas or hints?

how are you gonna display the counter for lazily loaded tree? if child nodes are not expanded (fetched via api calls), are you gonna show something differently? — ABOS, Feb 14 '19 at 15:51
@Leo, If you use a Tree with flat nodes https://material.angular.io/components/tree/overview#flat-tree, you can add all the properties you want to the "items" — Eliseo, Feb 14 '19 at 16:34
Yeah, but these are added once. Won't change in the course of life time unless I change it. But for DnD the counter would change depending on where I would drop the node. So following your advice sounds like some computation although the node not yet dropped. Perhaps I miss something.... — LeO, Feb 14 '19 at 17:10

score 0 · Answer 1 · answered Dec 11 '19 at 23:45

Solution #1 Item Count Order

You will need to structure data to display index by adding property to nodes. So in your .ts file update interface to add properties you need, similarly as below (note that code is not complete I assume you already have at least default component from Angular Material Tree Examples :

IN TS:

interface FoodNode {
  id: number; //THIS IS YOUR ORDER NUMBER
  name: string;
  url: string;
  children?: MenuNode[];
}
const TREE_DATA:2 FoodNode[] = [
  {
    id:"1"  //THIS IS YOUR ORDER NUMBER YOU WILL REFER IN HTML AS {{node.id}} 
    name: 'Fruit',
    url:'/fruitCategrory'
    children: [
      {id:"1",name: 'Apple' , url:'/fruit'},
      {id:"2",name: 'Banana', url:'/fruit'},
      {id:"3",name: 'Fruit loops', url:'/fruit'},
    ]
  }
];

IN HTML:

 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <!-- use a disabled button to provide padding for tree leaf -->
    <button mat-icon-button disabled></button>
    {{node.id}}.{{node.name}} <!-- THIS IS YOUR ID -->
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.name">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.id}}.{{node.name}} <!-- THIS IS YOUR ID -->
  </mat-tree-node>
</mat-tree>

Solution #2 Item Count

Additionally, for those who are looking for item count of nested items under the parent node code is below. For an example Component Page Builder has 3 children: Home Page , Website , Footer where "5 Website" has 5 items and so on....

To display count simple add {{ node.children.length}} as in code below:

    <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
      <!-- This is the tree node template for leaf nodes -->
      <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="tree-node">
        <!-- use a disabled button to provide padding for tree leaf -->
        <button mat-icon-button disabled></button>
    <a
      routerLinkActive="active"
      *ngIf="node.url; else noLink"
      [routerLink]="[node.url]"
      >{{ node.name }}
    </a>
    <ng-template #noLink> {{ node.name }} </ng-template>
  </cdk-nested-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <cdk-nested-tree-node
    *cdkTreeNodeDef="let node; when: hasChild"
    class="tree-node"
  >
    <button
      mat-icon-button
      [attr.aria-label]="'toggle ' + node.name"
      cdkTreeNodeToggle
    >
      <mat-icon class="mat-icon-rtl-mirror">
        {{ treeControl.isExpanded(node) ? "folder" : "folder_open" }}
      </mat-icon>
    </button>
    {{ node.children.length }} <!-- HERE IS YOUR COUNT -->
    {{ node.name }}
    <div [class.tree-invisible]="!treeControl.isExpanded(node)">
      <ng-container cdkTreeNodeOutlet></ng-container>
    </div>
  </cdk-nested-tree-node>
</cdk-tree>

Angular Material: Tree node counting

1 Answers1