title: Tree component is not rendering properly
body: <p>Nested tree control in angular material is not rendering properly. I have used this link <a href="https://material.angular.io/components/tree/examples" rel="nofollow noreferrer">https://material.angular.io/components/tree/examples</a>, but its not rendering same as example shown in link.</p>
  
  <p><img src="https://i.stack.imgur.com/VAg4c.jpg" alt="Tree view rendered in browser"></p>
  
  <p>app.component.html file contains html code for tree view</p>
  
  <p><strong>app.component.html file</strong></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
       &lt;div class="col-md-4"&gt;
  
        &lt;mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree"&gt;
          &lt;!-- This is the tree node template for leaf nodes --&gt;
          &lt;mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle&gt;
            &lt;li class="mat-tree-node"&gt;
              &lt;!-- use a disabled button to provide padding for tree leaf --&gt;
              &lt;button mat-icon-button disabled&gt;&lt;/button&gt;
              {{node.name}}
            &lt;/li&gt;
          &lt;/mat-tree-node&gt;
          &lt;!-- This is the tree node template for expandable nodes --&gt;
          &lt;mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild"&gt;
            &lt;li&gt;
              &lt;div class="mat-tree-node"&gt;
                &lt;button mat-icon-button matTreeNodeToggle
                        [attr.aria-label]="'toggle ' + node.name"&gt;
                  &lt;mat-icon class="mat-icon-rtl-mirror"&gt;
                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                  &lt;/mat-icon&gt;
                &lt;/button&gt;
                {{node.name}}
              &lt;/div&gt;
              &lt;ul [class.example-tree-invisible]="!treeControl.isExpanded(node)"&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;/div&gt;
       &lt;div class="col-md-8"&gt;
           &lt;p&gt; Drop Area &lt;/p&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.component.ts file contains typescript code for data source and other tree view initialization code.</p>
  
  <p><strong>app.component.ts file</strong></p>
  
  <pre><code>import { NestedTreeControl } from '@angular/cdk/tree';
  import { Component } from '@angular/core';
  import { MatTreeNestedDataSource } from '@angular/material/tree';
  import { TREE_DATA, FoodNode }  from '../../src/dataSource';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'FPGA-App-new';
    treeControl = new NestedTreeControl&lt;FoodNode&gt;(node =&gt; node.children);
    dataSource = new MatTreeNestedDataSource&lt;FoodNode&gt;();
  
    constructor() {
      this.dataSource.data = TREE_DATA;
    }
  
    hasChild = (_: number, node: FoodNode) =&gt; !!node.children &amp;&amp; node.children.length &gt; 0;
  }
  </code></pre>
  
  <p>app.module.ts file contains relevant imported modules</p>
  
  <p><strong>app.module.ts file</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  import {MatTreeModule, MatIconModule, MatButtonModule } from '@angular/material'
  import {FormsModule, ReactiveFormsModule} from '@angular/forms';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      AppRoutingModule,
      MatTreeModule, MatIconModule, MatButtonModule,
      FormsModule,
      ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>