title: Failure while implementing a tree view from an API in Angular 9
body: <p>I am trying to implement a Material Design Tree View, which completely loads the data from an API. However, my implementation is throwing out errors. The HttpClient import seems to be fine, I don't get what is wrong. I tried mendling with the code without any avail.</p>
  
  <p>My .scss file:</p>
  
  <pre><code>.example-tree-progress-bar {
    margin-left: 30px;
  }
  
  .example-tree-invisible {
    display: none;
  }
  
  .example-tree ul,
  .example-tree li {
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: none;
  }
  
  </code></pre>
  
  <p>My .html file:</p>
  
  <pre><code>&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;
  
  </code></pre>
  
  <p>My .ts file: </p>
  
  <pre><code>import {NestedTreeControl} from '@angular/cdk/tree';
  import {Component} from '@angular/core';
  import {MatTreeNestedDataSource} from '@angular/material/tree';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  /**
   * Food data with nested structure.
   * Each node has a name and an optional list of children.
   */
  interface FoodNode {
    name: string;
    children?: FoodNode[];
  }
  
  /* const TREE_DATA: FoodNode[] = [
    {
      name: 'Fruit',
      children: [
        {name: 'Apple'},
        {name: 'Banana'},
        {name: 'Fruit loops'},
      ]
    }, {
      name: 'Vegetables',
      children: [
        {
          name: 'Green',
          children: [
            {name: 'Broccoli'},
            {name: 'Brussels sprouts'},
          ]
        }, {
          name: 'Orange',
          children: [
            {name: 'Pumpkins'},
            {name: 'Carrots'},
          ]
        },
      ]
    },
  ]; */
  
  
  
  const TREE_DATA: FoodNode[] = [];
  
  
  
  /**
   * @title Tree with nested nodes
   */
  @Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss'],
  })
  export class TreeNestedOverviewExample {
    treeControl = new NestedTreeControl&lt;FoodNode&gt;(node =&gt; node.children);
    dataSource = new MatTreeNestedDataSource&lt;FoodNode&gt;();
  
    constructor(private client: HttpClient) {
      this.dataSource.data = TREE_DATA;
  
    }
  
    ngOnInit() {
      const httpOptions = {
        headers: new HttpHeaders({ 'Content-Type': 'application/json' })
      };
      const API_URL = 'https://urlhere.com/gettreeview';
    this.client.get(API_URL, this.httpOptions).subscribe(
      (res) =&gt; { this.TREE_DATA.push(res);console.log('Res: ', res); },
    );
    }
  
    hasChild = (_: number, node: FoodNode) =&gt; !!node.children &amp;&amp; node.children.length &gt; 0;
  }
  
  
  
  </code></pre>
  
  <p>My errors:</p>
  
  <pre><code>core.js:5882 ERROR NullInjectorError: R3InjectorError(AppModule)[HttpClient -&gt; HttpClient -&gt; HttpClient]: 
    NullInjectorError: No provider for HttpClient!
  main.ts:12 NullInjectorError: R3InjectorError(AppModule)[HttpClient -&gt; HttpClient -&gt; HttpClient]: 
    NullInjectorError: No provider for HttpClient!
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p>My JSON, which is fetched from the API:</p>
  
  <pre><code>[
     {
        "id": 1,
        "name": "- Admin",
        "children": [
           {
              "id": 2,
              "name": "Jimmy"
           },
           {
              "id": 3,
              "name": "Tom"
           }
        ]
     },
     {
        "id": 4,
        "name": "- Users",
        "children": [
           {
              "id": 5,
              "name": "Scott"
           },
           {
              "id": 6,
              "name": "John"
           }
        ]
     },
     {
        "id": 7,
        "name": "- Developer",
        "children": [
           {
              "id": 8,
              "name": "Robert"
           },
           {
              "id": 9,
              "name": "Scarlett"
           },
           {
              "id": 10,
              "name": "Johnson"
           }
        ]
     }
  ]
  </code></pre>