title: Non-recursive nested trees in angular material
body: <p>Using <a href="https://material.angular.io/components/tree/overview" rel="nofollow noreferrer">this component</a> I need to display the following object:</p>
  <pre class="lang-js prettyprint-override"><code>interface ResourceNode {
    text: string;
    type: string;
    url: string;
    order: string;
    icon: string;
    groupName?: string[]
  }
  
  // Example
  this.myResource = {
    text: 'My text',
    type: 'My type',
    url: 'My url',
    order: 'My order',
    icon: 'My icon',
    groupName: ['Group 1', 'Group 2']
  }
  </code></pre>
  <p>What I'm looking for in the component is specifically the &quot;nested tree&quot;. However, in the documentation they are using a recursive approach, where children (nested nodes) have the same type as the parent node:</p>
  <pre class="lang-js prettyprint-override"><code>interface FoodNode {
    name: string;
    children?: FoodNode[];
  }
  </code></pre>
  <p>When creation the TreeControl I get an error:</p>
  <pre class="lang-js prettyprint-override"><code>// Documented version
  export class TreeNestedOverviewExample {
    treeControl = new NestedTreeControl&lt;FoodNode&gt;(node =&gt; node.children);
  }
  
  // My version
  export class ResourceConfigComponent implements OnInit {
    treeControl = new NestedTreeControl&lt;string[]&gt;(resource =&gt; resource.groupName); // Property 'groupName' does not exist on type 'string[]
  }
  
  // Another thing I tried
  export class ResourceConfigComponent implements OnInit {
    treeControl = new NestedTreeControl&lt;ResourceNode[]&gt;(resource =&gt; resource.groupName); // Property 'groupName' does not exist on type 'ResourceNode[]'
  }
  </code></pre>
  <p>Is possible to achieve what I'm trying to do with this component?</p>