<app-page-header [title]="'Treeview'" [title1]="'Treeview'" [activeitem]="'Advanced UI'"></app-page-header>

<!-- Start::row-1 -->
   <div class="grid grid-cols-12 gap-6">
    <div class="col-span-12">
      <div class="box">
        <div class="box-header">
          <h5 class="box-title">Basic Treeview</h5>
        </div>
        <div class="box-body">
          <div id="tree" class="text-base font-semibold text-gray-600 dark:text-white/70">
            <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
              <!-- This is the tree node template for leaf nodes -->
              <!-- There is inline padding applied to this node using styles.
              This padding value depends on the mat-icon-button width. -->
              <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
                  {{node.name}}
              </mat-tree-node>
              <!-- This is the tree node template for expandable nodes -->
              <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
                  <div class="mat-tree-node">
                  <button mat-icon-button matTreeNodeToggle
                          [attr.aria-label]="'Toggle ' + node.name">
                          <span class=" {{treeControl.isExpanded(node) ? 'tree-expando ' : 'tree-expando'}}">+</span>
                  </button>
                  {{node.name}}
                  </div>
                  <!-- There is inline padding applied to this div using styles.
                      This padding value depends on the mat-icon-button width.  -->
                  <div [class.example-tree-invisible]="!treeControl.isExpanded(node)"
                      role="group">
                  <ng-container matTreeNodeOutlet></ng-container>
              </div>
              </mat-nested-tree-node>
          </mat-tree>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End::row-1 -->