title: Iterate Tables and Labels Using ngFor in Angular
body: <p>I’m trying to make several tables with a several label heading. The label heading should be the project.name. On each project.name, it will have the table material_projects. In it it will have heading of material_name, quantity, unit and total. I have the example picture below on how would I want to achieve this. I’ve also added the api response below. I’m confused on how would I iterate using the *ngFor in the html.</p>
  
  <p><a href="https://i.stack.imgur.com/MRY33.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MRY33.png" alt="Table"></a></p>
  
  <p><a href="https://i.stack.imgur.com/wp9ZD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wp9ZD.png" alt="json response"></a></p>
  
  <pre><code>getAllProjects() {
      this.subscription = this.projectsService.getAll()
        .subscribe(
          (data:any) =&gt; {
            this.projects = data.projects;
            console.log(data);
          },
          error =&gt; {
            console.log(error);
          });
    }
  </code></pre>
  
  <blockquote>
    <p>html</p>
  </blockquote>
  
  <pre><code>&lt;div class="card-block"&gt;
    &lt;table class="table table-bordered table-striped"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Project Name&lt;/th&gt;
          &lt;th&gt;Material ID&lt;/th&gt;
          &lt;th&gt;Unit&lt;/th&gt;
          &lt;th&gt;Quantity&lt;/th&gt;
          &lt;th&gt;Total Quantity&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr *ngFor="let project of projects"&gt;
          &lt;td&gt;{{ project.name }}&lt;/td&gt;
          &lt;td&gt;{{ project.material_projects.material_id}}&lt;/td&gt;
          &lt;td&gt;{{ project.material_projects.unit }}&lt;/td&gt;
          &lt;td&gt;{{ project.material_projects.quantity }}&lt;/td&gt;
          &lt;td&gt;{{ project.material_projects.total }}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>