Iterate Tables and Labels Using ngFor in Angular


I’m trying to make several tables with a several label heading. The label heading should be the On each, 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.


json response

getAllProjects() {
    this.subscription = this.projectsService.getAll()
        (data:any) => {
          this.projects = data.projects;
        error => {


<div class="card-block">
  <table class="table table-bordered table-striped">
        <th>Project Name</th>
        <th>Material ID</th>
        <th>Total Quantity</th>
      <tr *ngFor="let project of projects">
        <td>{{ }}</td>
        <td>{{ project.material_projects.material_id}}</td>
        <td>{{ project.material_projects.unit }}</td>
        <td>{{ project.material_projects.quantity }}</td>
        <td>{{ }}</td>


You can do something like this,

<div *ngFor="project of projects">
    <tr *ngFor="innerItem of project.material_projects">

Answered By – AddWeb Solution Pvt Ltd

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.