angular material tree to display organization structure

Question

I want to display organization structure using angular material tree with position, salary, year of services as properties.

class Employee {
  name: string;
  position: string;
  salary: number;
  yearofServices: number;
  reports: Employee[];
 }

For example,

[ 
  {id: 1,
   name:'employee1',
   position: 'president',
   salary: 250000,
   yearofServices: 20,
   reports: [
    {
      id: 2,
      name:'employee2',
      position: 'manager',
      salary: 200000,
       yearofServices: 10,
    },
   {
      id: 3,
      name:'employee3',
      position: 'manager',
      salary: 190000,
       yearofServices: 15,
    }
   ];
]

We want to display four columns:

Name Position Salary YearOfService

Name column is a tree structure according to organization reports hierarchy. For example, if a manager has three reports, the manager node will have three sub nodes.

Is it possible to do this using angular material tree control?

Answer 1

It is possible, see an example here: https://stackblitz.com/edit/angular-m77g7e-semvxp?file=app%2Ftable-basic-example.html

Referenced in https://github.com/angular/components/issues/15187.

Another option is to have two mat-tree components, one for traversing the hierarchy, the other for the fixed columns. You can use the treeControl.isExpanded(node) to toggle visibility on both components. (This will work for the cdk-tree component too.)

Answer 2

Of course it's possible! It's just a directive that allows HTML.

I didn't stub one all the way out but the gist of it is really simple:

  const TREE_DATA: Employee[] = [
  {
    name: 'Bob',
    position:'President of Lattes'    
  }, {
    name: 'Becky',
    position: 'Manager Of Latte Presidents',
    reports: [{
        name: 'Bob',
        position:'President of Lattes'  
      }, {
        name: 'Steve',
        position: 'President of Mocha-Locha'
      },
      {
        name: 'Arnie',
        position: 'President of Tepid-Teas',
        reports: [
           {
              name: 'Mick',
              position: 'Loose orders for loose leaf'
           },
           {
              name: 'Michelle',
              position: 'The First With The Green'
           }
        ]
      }
      ]
  },
];

And the HTML

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


<!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li class="mat-tree-node">
      <!-- use a disabled button to provide padding for tree leaf -->
      <button mat-icon-button disabled></button>
      <div class="container-fluid">
          <div class="row">
              <div class="col">{{node.name}}</div>
              <div class="col">{{node.position}}</div>
              <div class="col">salary here</div>
              <div class="col">Years of Service</div>
          </div>
        </div>
    </li>
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
    <li>
      <div class="mat-tree-node ">
        <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>
        <div class="container-fluid">
          <div class="row">
              <div class="col">{{node.name}}</div>
              <div class="col">{{node.position}}</div>
              <div class="col">salary</div>
              <div class="col">0</div>
          </div>
        </div>
      </div>
      <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

And to really see it, you can check out the StackBlitz