materialized_tree.txt

0) https://angular2-tree.readme.io/docs/styling
1) https://dmitriiser.github.io/angular2-materialize-css-tree-component/
2) 

.mat-tree-node { min-height: 30px }

.mat-tree-node {
  min-height: 1.2em !important;
  height: 1.2em;
}

mat-tree-node {
    max-height: 16px
}

3)
.example-tree-invisible {
  display: none;
}

.example-tree ul,
.example-tree li {
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
}

.checklist-leaf-node {
  padding-left: 40px;
}

.submit-button {
  margin-top: 10px;
}

.toggle-show-only-selected {
  margin-top: 15px;
}

<h3>Filtered Nested Multi-select Tree Demo</h3>
<p>
  <label>Filter by:
    <input [(ngModel)]="searchString" />
  </label>
  <mat-slide-toggle class="toggle-show-only-selected" [(ngModel)]="showOnlySelected">Show only selected</mat-slide-toggle>
</p>
<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
    [style.display]="showOnlySelected && !node.selected || this.searchString && hideLeafNode(node) ? 'none' : 'block'"
  >
    <li class="mat-tree-node">
      <mat-checkbox class="checklist-leaf-node" (change)="itemToggle($event.checked,node)" [checked]="node.selected"
>{{node.name}}</mat-checkbox>
    </li>
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-nested-tree-node 
    *matTreeNodeDef="let node; when: hasChild"
    [style.display]="(showOnlySelected && !(node.selected || node.indeterminate)) || this.searchString && hideParentNode(node) ? 'none' : 'block'"
  >
    <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>
            <mat-checkbox [checked]="node.selected"
                  [indeterminate]="node.indeterminate && !node.selected"
                  (change)="itemToggle($event.checked,node)">{{node.name}}</mat-checkbox>
      </div>
      <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>
<button class="submit-button" mat-raised-button (click)="submit()">Submit</button>

<p #outputDiv></p>

 import { NestedTreeControl } from '@angular/cdk/tree';
import { MatTreeNestedDataSource } from '@angular/material/tree';
import { Component, ElementRef, ViewChild } from '@angular/core';

/**
 * Vehicle data with nested structure.
 * Each node has a name and an optiona list of children.
 */
interface VehicleNode {
  name: string;
  id?: number;
  children?: VehicleNode[];
  selected?: boolean;
  indeterminate?: boolean;
  parent?: VehicleNode;
}

const TREE_DATA: VehicleNode[] = [
  {
    name: 'Infiniti',
    children: [
      {
        name: 'G50',
        children: [
          { name: 'Pure AWD', id: 1 },
          { name: 'Luxe', id: 2 },
        ],
      },
      {
        name: 'QX50',
        children: [
          { name: 'Pure AWD', id: 3 },
          { name: 'Luxe', id: 4 },
        ],
      },
    ],
  },
  {
    name: 'BMW',
    children: [
      {
        name: '2 Series',
        children: [
          { name: 'Coupé', id: 5 },
          { name: 'Gran Coupé', id: 6 },
        ],
      },
      {
        name: '3 Series',
        children: [
          { name: 'Sedan', id: 7 },
          { name: 'PHEV', id: 8 },
        ],
      },
    ],
  },
];

/**
 * @title Tree with nested nodes
 */
@Component({
  selector: 'tree-nested-overview-example',
  templateUrl: 'tree-nested-overview-example.html',
  styleUrls: ['tree-nested-overview-example.css'],
})
export class TreeNestedOverviewExample {
  public treeControl = new NestedTreeControl<VehicleNode>(
    (node) => node.children
  );
  public dataSource = new MatTreeNestedDataSource<VehicleNode>();
  @ViewChild('outputDiv', { static: false })
  public outputDivRef: ElementRef<HTMLParagraphElement>;
  public searchString = '';
  public showOnlySelected = false;

  constructor() {
    this.dataSource.data = TREE_DATA;
    Object.keys(this.dataSource.data).forEach((key) => {
      this.setParent(this.dataSource.data[key], null);
    });
  }

  public hasChild = (_: number, node: VehicleNode) =>
    !!node.children && node.children.length > 0;

  private setParent(node: VehicleNode, parent: VehicleNode) {
    node.parent = parent;
    if (node.children) {
      node.children.forEach((childNode) => {
        this.setParent(childNode, node);
      });
    }
  }

  private checkAllParents(node: VehicleNode) {
    if (node.parent) {
      const descendants = this.treeControl.getDescendants(node.parent);
      node.parent.selected = descendants.every((child) => child.selected);
      node.parent.indeterminate = descendants.some((child) => child.selected);
      this.checkAllParents(node.parent);
    }
  }

  private itemToggle(checked: boolean, node: VehicleNode) {
    node.selected = checked;
    if (node.children) {
      node.children.forEach((child) => {
        this.itemToggle(checked, child);
      });
    }
    this.checkAllParents(node);
  }

  public submit() {
    let result = this.dataSource.data.reduce(
      (acc: string[], node: VehicleNode) =>
        acc.concat(
          this.treeControl
            .getDescendants(node)
            .filter(node => 
              (node.children == null || node.children.length === 0) 
              && node.selected
              && !this.hideLeafNode(node))
            .map((descendant) => descendant.name)
        ),
      [] as string[]
    );

    this.outputDivRef.nativeElement.innerText =
      'You ' +
      (result.length > 0
        ? 'selected ' + result.join(', ')
        : 'have not made a selection') +
      '.';
  }
  
  public hideLeafNode(node: VehicleNode): boolean {
    return this.showOnlySelected && !node.selected 
      ? true 
      : new RegExp(this.searchString, 'i').test(node.name) === false;
  }

  public hideParentNode(node: VehicleNode): boolean {
    return this.treeControl
        .getDescendants(node)
        .filter(node => node.children == null || node.children.length === 0)
        .every(node => this.hideLeafNode(node));
  }
}

body { 
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}

.basic-container {
  padding: 30px;
}

.version-info {
  font-size: 8pt;
  float: right;
}


4)
.example-tree-invisible {
  display: none;
}

.example-tree ul,
.example-tree li {
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
}

.checklist-leaf-node {
  padding-left: 40px;
}

.submit-button {
  margin-top: 10px;
}

<h3>Nested Multi-select Tree Demo</h3>
<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">
      <mat-checkbox class="checklist-leaf-node" (change)="itemToggle($event.checked,node)" [checked]="node.selected"
>{{node.name}}</mat-checkbox>
    </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>
            <mat-checkbox [checked]="node.selected"
                  [indeterminate]="node.indeterminate && !node.selected"
                  (change)="itemToggle($event.checked,node)">{{node.name}}</mat-checkbox>
      </div>
      <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>
<button class="submit-button" mat-raised-button (click)="submit()">Submit</button>

<p #outputDiv></p>

/**
 * Vehicle data with nested structure.
 * Each node has a name and an optiona list of children.
 */
interface VehicleNode {
  name: string;
  id?: number;
  children?: VehicleNode[];
  selected?: boolean;
  indeterminate?: boolean;
  parent?: VehicleNode;
}

const TREE_DATA: VehicleNode[] = [
  {
    name: "Infiniti",
    children: [
      {
        name: "G50",
        children: [
          { name: "Pure AWD", id: 1 },
          { name: "Luxe", id: 2 }
        ]
      },
      {
        name: "QX50",
        children: [
          { name: "Pure AWD", id: 3 }, 
          { name: "Luxe", id: 4 }
        ]
      }
    ]
  },
  {
    name: "BMW",
    children: [
      {
        name: "2 Series",
        children: [
          { name: "Coupé", id: 5 },
          { name: "Gran Coupé", id: 6 }
        ]
      },
      {
        name: "3 Series",
        children: [
          { name: "Sedan", id: 7 }, 
          { name: "PHEV", id: 8 }
        ]
      }
    ]
  }
];

/**
 * @title Tree with nested nodes
 */
@Component({
  selector: "tree-nested-overview-example",
  templateUrl: "tree-nested-overview-example.html",
  styleUrls: ["tree-nested-overview-example.css"]
})
export class TreeNestedOverviewExample {
  public treeControl = 
    new NestedTreeControl<VehicleNode>(node => node.children);
  public dataSource = new MatTreeNestedDataSource<VehicleNode>();
  @ViewChild('outputDiv', {static: false}) 
  public outputDivRef: ElementRef<HTMLParagraphElement>;

  constructor() {
    this.dataSource.data = TREE_DATA;
    Object.keys(this.dataSource.data).forEach(key => {
      this.setParent(this.dataSource.data[key], null);
    });
  }

  public hasChild = (_: number, node: VehicleNode) =>
    !!node.children && node.children.length > 0;

  private setParent(node: VehicleNode, parent: VehicleNode) {
    node.parent = parent;
    if (node.children) {
      node.children.forEach(childNode => {
        this.setParent(childNode, node);
      });
    }
  }

  private checkAllParents(node: VehicleNode) {
    if (node.parent) {
      const descendants = this.treeControl.getDescendants(node.parent);
      node.parent.selected = 
        descendants.every(child => child.selected);
      node.parent.indeterminate = 
        descendants.some(child => child.selected);
      this.checkAllParents(node.parent);
    }
  }

  private itemToggle(checked: boolean, node: VehicleNode) {
    node.selected = checked;
    if (node.children) {
      node.children.forEach(child => {
        this.itemToggle(checked, child);
      });
    }
    this.checkAllParents(node);
  }
  
  public submit() {
    let result = this.dataSource.data.reduce(
      (acc: string[], node: VehicleNode) => 
        acc.concat(this.treeControl
                    .getDescendants(node)
                    .filter(descendant => descendant.selected)
                    .map(descendant => descendant.name))
      , [] as string[]);

    this.outputDivRef.nativeElement.innerText = 'You ' 
      + (result.length > 0 
        ? 'selected ' + result.join(', ') 
        : 'have not made a selection')
      + '.';
  }
}