Angular Mat Table Error: Missing definitions for header and row : <p>I am using MatTable from Angular Material 5.2.5. I trying to populate the table with data which is got through a server request.</p>

<p>The UI</p>

<pre><code>  &lt;mat-table [dataSource]="dataSource"&gt;
    &lt;ng-container matColumnDef="number"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt;#&lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let i = index"&gt;{{i + 1}}&lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="name"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt;Name&lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let user"&gt;{{user.userName}}&lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    ...
  &lt;/mat-table&gt;
</code></pre>

<p>The component code</p>

<pre><code>  public dataSource = new MatTableDataSource&lt;User&gt;()
  public displayedColumns = ['number', 'name', 'email', 'phone', 'joiningDate']
</code></pre>

<p>Adding data to dataSource on receiving data from the server</p>

<pre><code> onGettingPartnerUsers(userList: User[]) {
  console.log('userList', userList)
  if (!Util.isFilledArray(userList)) {
    // TODO show message no user found
  } else {
    this.dataSource.data = userList
  }
 }
</code></pre>

<p>I am getting the list of users. But this error is getting thrown.</p>

<pre><code>Error: Missing definitions for header and row, cannot determine which columns should be rendered.
</code></pre>

<p>What is the mistake?</p>

<p>PS: I am following <a href="https://medium.com/codingthesmartway-com-blog/angular-material-part-4-data-table-23874582f23a" rel="noreferrer">this</a> blog on using MatTable</p>
