title: Angular material table not showing data
body: <p>People who want paging and sorting on client side please refer <a href="https://angular-material2-table-tiorfz.stackblitz.io" rel="noreferrer">this link</a></p>
  
  <p>Here is what I tried. The data is loading in the console. but it is not displayed on the grid or mat table. </p>
  
  <p>I don't have any error in the console. I am able to see the data in the console but the data is not loaded into the grid.</p>
  
  <p>Can somebody tell me what am I doing wrong?</p>
  
  <p>The actual database from where data is emitted out.</p>
  
  <pre><code>export class FormsDatabase {
  
     formsList =  new BehaviorSubject([]);
      get data(){
  
        return this.formsList.value;
     }
  
   constructor(private _formsServicedata: FormsService){
      this._formsServicedata.getAllFormData('').subscribe((form)=&gt;{
          console.log("Form DataSource: ");
      this.formsList.next(form);
    })
     }
  
  }
  
  
  export class FormDataSource extends DataSource&lt;any&gt;{
  
      constructor( private formsDb: FormsDatabase,public 
      paginator:MatPaginator , public sort: MatSort
      ) {
         super()        
        }
  
     connect():Observable&lt;any&gt;{
        const formsData=[
           this.formsDb.formsList ,
           this.sort.sortChange
      ];
  
       return Observable.merge(...formsData).map(()=&gt;{
            this.getSortedData();
      })
  
  
      }
  </code></pre>
  
  <p>Sort Function to sort the data</p>
  
  <pre><code>      getSortedData(){
  
          const data = this.formsDb.data.slice();
         if(!this.sort.active || this.sort.direction==''){ return data;}
  
          return data.sort((a,b)=&gt;{
  
          let propertyA:number|string='';
          let propertyB:number|string='';
  
      switch(this.sort.active)
      {
          case 'formname': [propertyA,propertyB]=
       [a.formname,b.formname];break;
          case 'displaytext': [propertyA,propertyB]=
       [a.displaytext,b.displaytext];break;
          case 'sortorder': [propertyA,propertyB]=
       [a.sortorder,b.sortorder];break;
      }
  
      let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
      let valueB = isNaN(+propertyB) ? propertyB : +propertyB;
  
      return (valueA &lt; valueB?-1:1)*(this.sort.direction=='asc'?1:-1);
     });
    }
  
         disconnect() { }
  
   }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>  &lt;mat-table #table [dataSource]="dataSource" matSort&gt;
  
        &lt;ng-container matColumnDef="formname"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; FORM NAME 
       &lt;/mat-header-cell&gt;
            &lt;mat-cell *matCellDef="let element"&gt; {{element.formname}} 
      &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
  
        &lt;ng-container matColumnDef="displaytext"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; DISPLAY TEXT &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{element.displaytext}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="sortorder"&gt;
              &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; SORT ORDER&lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt; {{element.sortorder}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
        &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
  
      &lt;mat-paginator #paginator
                     [pageSize]="10"
                     [pageSizeOptions]="[5, 10, 20]"
                     [showFirstLastButtons]="true"&gt;
      &lt;/mat-paginator&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Service:</p>
  
  <p>Forms Service has the below method which returns the forms list as observable</p>
  
  <pre><code>  getAllFormData(orderBy:string) {
      return this.af.list('/forms');
    }
  </code></pre>