title: Angular Material Nested Tree
body: <p>Can someone please help me with the simplest method of adding a new node to the angular material nested tree?
  I searched everywhere and did not find a suitable method for the nested tree.
  This is my cod so far :</p>
  <pre><code>TS:
  export class FileNode {
    children!: FileNode[];
    fileName!: string;
    type: any;
  }
  
      export class AppComponent {
        nestedDataSource= new MatTreeNestedDataSource&lt;FileNode&gt;();
        nestedTreeControl = new NestedTreeControl&lt;FileNode&gt;(node =&gt; node.children);
      
        constructor() {
          this.nestedDataSource.data=TREE_DATA;
         }
      
         hasChild = (nr: number, nodeData: FileNode) =&gt; { return !(nodeData.type); };
            } 
  HTML :
  &lt;mat-tree [dataSource]=&quot;nestedDataSource&quot; [treeControl]=&quot;nestedTreeControl&quot; class=&quot;example-tree&quot;&gt;
  
  &lt;!--The node who does not need expansion because is a file of a folder--&gt;
    &lt;mat-tree-node *matTreeNodeDef=&quot;let node&quot;&gt;
        &lt;li class=&quot;mat-tree-node&quot;&gt;
            &lt;button mat-icon-button disabled&gt;&lt;/button&gt;
            {{node.fileName}}: {{node.type}}
            &lt;button mat-icon-button&gt;&lt;mat-icon&gt;add&lt;/mat-icon&gt;&lt;/button&gt;
        &lt;/li&gt;
    &lt;/mat-tree-node&gt;
  
  &lt;!--The node who does need expansion because is a folder--&gt;
    &lt;mat-nested-tree-node *matTreeNodeDef=&quot;let node; when: hasChild&quot;&gt;
        &lt;li&gt;
            &lt;div class=&quot;mat-tree-node&quot;&gt;
                &lt;button mat-icon-button matTreeNodeToggle&gt;
                    &lt;mat-icon class=&quot;mat-icon-rtl-mirror&quot;&gt;
                        {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                    &lt;/mat-icon&gt;
                &lt;/button&gt;
                {{node.fileName}}
                &lt;button mat-icon-button&gt;&lt;mat-icon&gt;add&lt;/mat-icon&gt;&lt;/button&gt;
            &lt;/div&gt;
            &lt;ul [class.example-tree-invisible]=&quot;!nestedTreeControl.isExpanded(node)&quot;&gt;
                &lt;ng-container matTreeNodeOutlet&gt;&lt;/ng-container&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/mat-nested-tree-node&gt;
  &lt;/mat-tree&gt;
  
  &lt;!--The compiler chooses the node depending on the method: hasNestedChild--&gt;
  </code></pre>