title: How to fill a table with data from service in Angular Material?
body: <p>I'm trying to create a table with information returned from a service. The problem is that the only row shown is the last one in the list returned by the service.</p>
  <p>Code from <code>list.component.ts</code></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { DepartamentoService } from '../../_service/departamento.service';
  
  export interface Items{
     idItem: number;
     nameItem: string;
  }
  
  @Component({
     selector: 'app-list',
     templateUrl: './list.component.html',
     styleUrls: ['./list.component.css']
  })
  
  export class LoginComponent implements OnInit {
  
       displayedColumns: string[] = ['idItem', 'nameItem', 'options'];
       columnsToDisplay: string[] = this.displayedColumns.slice();
       itemList: Items[];
       
       constructor(private itemService: ItemsService) { }
  
       ngOnInit(): void {
              this.itemService.list().subscribe(data =&gt; {
              data.forEach(element =&gt; {
                  this.itemList = [{idItem: element.idItem, nameItem: element.nameItem}];
                  console.log(`Id: ${element.idItem} - Name ${element.nameItem}`);
           });
       });
   }
  }
  </code></pre>
  <p>Code from <code>list.component.html</code></p>
  <pre><code>&lt;table mat-table [dataSource]=&quot;itemList&quot; class=&quot;mat-elevation-z8&quot;&gt;
       &lt;ng-container [matColumnDef]=&quot;column&quot; *ngFor=&quot;let column of displayedColumns&quot;&gt;
           &lt;th id=&quot;head&quot; mat-header-cell *matHeaderCellDef&gt; {{column}} &lt;/th&gt;
           &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element[column]}} &lt;/td&gt;
       &lt;/ng-container&gt;
  
       &lt;tr mat-header-row *matHeaderRowDef=&quot;columnsToDisplay&quot;&gt;&lt;/tr&gt;
       &lt;tr mat-row *matRowDef=&quot;let row; columns: columnsToDisplay;&quot;&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>Any help is appreciated.</p>