title: column.footerCell is undefined on Angular Material table
body: <p>When adding a footer for a mat-table on Angular Material, I'm getting this error:</p>
  
  <blockquote>
    <p>column.footerCell is undefined</p>
  </blockquote>
  
  <p>Below is my code:</p>
  
  <pre><code>&lt;table mat-table [dataSource]="people" class="mat-elevation-z8"&gt;
      &lt;ng-container matColumnDef="name"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;Name&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt;
              &lt;strong&gt;{{ element.name }}&lt;/strong&gt;
          &lt;/td&gt;
          &lt;td mat-footer-cell *matFooterCellDef&gt; {{ people.length }} people&lt;/td&gt;
      &lt;/ng-container&gt;
  
      ...
  
      &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;tr mat-footer-row *matFooterRowDef="displayedColumns"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Data looks like this:</p>
  
  <pre><code>public displayedColumns = ['name'];
  public people = [
    {id: 1, name: 'John'},
    {id: 2, name: 'Jane'},
    {id: 3, name: 'Joe'},
  ];
  </code></pre>
  
  <p>If I remove the footer codes, everything works well. 
  Any ideas on this?</p>