title: cdk-table: Could not find column with id
body: <p>I am using angular material table for displaying data. I am having string array of displayColumns but I get 'Could not find column with id 'Name'' error. Here is my error. Help is appreciated. </p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { DataService } from '../core/services/data.service';
  import { People, PeopleDetails, PeopleDetailRequest, PeopleWithTotals } from "../models/datamodelsObj";
  import { DataSource } from '@angular/cdk';
  import { MdPaginator } from '@angular/material';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/startWith';
  import 'rxjs/add/observable/merge';
  import 'rxjs/add/operator/map';
  
  @Component({
    selector: 'app-peoplesummary',
    templateUrl: './people-summary.component.html',
    styleUrls: ['./people-summary.component.scss'],
    providers:[]
  })
  export class PeopleSummaryComponent implements OnInit {
  
  
    displayedColumns = ['Name', 'Address', 'Email', 'Phone'];
    psDatabase : PeopleSummaryDatabase|null;
    dataSource: PeopleSummaryDataSource | null;
  
    @ViewChild(MdPaginator) paginator : MdPaginator;
  
    constructor(private dataService: DataService,private pagi:MdPaginator) { 
      this.psDatabase=new PeopleSummaryDatabase(dataService);
      this.dataSource=new PeopleSummaryDataSource(this.psDatabase,pagi);
    }
  
    ngOnInit() {
      this.dataSource = new PeopleSummaryDataSource(this.psDatabase, this.paginator);
      console.log(this.dataSource);
    }
  
  }
  export class PeopleSummaryDatabase {
    people: People;
    public dataChange: BehaviorSubject&lt;PeopleDetails[]&gt; = new BehaviorSubject&lt;PeopleDetails[]&gt;([]);
    get data(): PeopleDetails[] { return this.dataChange.value }
  
    private _dataService: DataService
  
  
  
    constructor(_dataService: DataService) {
      _dataService.getPersonDetails(this.assetDetailRequestObj).subscribe(data=&gt;this.dataChange.next(data));
     }
  
  }
  export class PeopleSummaryDataSource extends DataSource&lt;any&gt; {
  
      constructor(private _groupDatabase :PeopleSummaryDatabase, private _paginator: MdPaginator){
        super();
      }
  
      connect(): Observable&lt;PersonDetails[]&gt; {
        const displayDataChanges = [
          this._groupDatabase.dataChange,
          this._paginator.page
        ];
        return Observable.merge(...displayDataChanges).map(() =&gt; {
          const data = this._groupDatabase.data.slice();
          console.log(data);
  
          const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
          return data.splice(startIndex, this._paginator.pageSize);
        })
      }
  
      disconnect() {}
    }
  </code></pre>
  
  <p>and here is my html</p>
  
  <pre><code>&lt;md-table #table [dataSource]="dataSource"&gt;
  
        &lt;ng-container *cdkColumnDef="Name"&gt;
          &lt;md-header-cell *cdkCellDef&gt;Name&lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt; {{row.Name}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container *cdkColumnDef="Address"&gt;
          &lt;md-header-cell *cdkCellDef&gt;Address&lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt; {{row.Address}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container *cdkColumnDef="Email"&gt;
          &lt;md-header-cell *cdkCellDef&gt;Email&lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt; {{row.Email}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container *cdkColumnDef="Phone"&gt;
          &lt;md-header-cell *cdkCellDef&gt;Phone&lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt; {{row.Phone}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
  
        &lt;md-header-row *cdkHeaderRowDef="displayedColumns"&gt;&lt;/md-header-row&gt;
        &lt;md-row *cdkRowDef="let row; columns: displayedColumns;"&gt;&lt;/md-row&gt;
  
      &lt;/md-table&gt;
  
      &lt;md-paginator #paginator
                    [length]="psDatabase.data.length"
                    [pageIndex]="0"
                    [pageSize]="10"
                    [pageSizeOptions]="[5, 10, 25, 100]"&gt;
      &lt;/md-paginator&gt;
  </code></pre>
  
  <p>When I debug the I see data but don't understand why I get column not found error. Thank You</p>