title: How to attach MatPaginator to datasource coming from server in angular material table?
body: <p>I am using <a href="https://material.angular.io/components/table/overview" rel="noreferrer">angular Material table</a> to create grid in my Angular 5 project. 
  My data is coming from http request and its assigned to a variable  called dataSourceNew like this in view.ts file. Here dataSourceNew has dynamic content and strucuture and so I am not exporting any interface. </p>
  
  <pre><code>      this.http.get('http://example.org?,{headers: this.headers})
            .subscribe(
            res =&gt; { 
  
             this.displayedColumnsNew = res.record;
             this.dataSourceNew = res.data;
             this.matdatasource = new MatTableDataSource(this.dataSourceNew);
             this.dataSourceNew.paginator = this.paginator;
             console.log("got matdatasource object",this.matdatasource);
        // attached the result of this log below
  
           });
  </code></pre>
  
  <p>I am successfully able to create a data-table using this syntax in html file.</p>
  
  <pre><code>     &lt;div class="example-container mat-elevation-z8"&gt;
             &lt;mat-table #table [dataSource]="dataSourceNew"&gt;
  
  
         &lt;ng-container  *ngFor="let head of tableData.record; let i= index; " matColumnDef="{{head}}" (click)="setClickedRow(ddata) "  [class.active]="ddata[primaryid] == selectedRow"&gt;
                 &lt;mat-header-cell *matHeaderCellDef&gt; {{tableData.gridhead[i]}} 
                  &lt;/mat-header-cell&gt;
                &lt;mat-cell *matCellDef="let element"&gt; {{element[head]}} &lt;/mat-cell&gt;
           &lt;/ng-container&gt;
  
  
       &lt;mat-header-row *matHeaderRowDef="displayedColumnsNew"&gt;&lt;/mat-header-row&gt;
            &lt;mat-row *matRowDef="let row; columns: displayedColumnsNew;"&gt;
          &lt;/mat-row&gt;
              &lt;/mat-table&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to attach a pagination to this table and for that I have declared this</p>
  
  <pre><code> @ViewChild(MatPaginator) paginator: MatPaginator;
  </code></pre>
  
  <p>But When I attach the pagination to table in html like this,</p>
  
  <pre><code>  &lt;mat-paginator #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10, 20]"
                   [showFirstLastButtons]="true"&gt;
    &lt;/mat-paginator&gt;
  </code></pre>
  
  <p>I got the below error in console and it breaks my application. </p>
  
  <p>I have already imported this </p>
  
  <pre><code>import {MatPaginator, MatTableDataSource} from '@angular/material';
  </code></pre>
  
  <p>In respective .ts file.</p>
  
  <pre><code>Uncaught Error: Template parse errors:
  Can't bind to 'pageSize' since it isn't a known property of 'mat-paginator'.
  1. If 'mat-paginator' is an Angular component and it has 'pageSize' input, then verify that it is part of this module.
  2. If 'mat-paginator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
  </code></pre>
  
  <p>Also when I log this.dataSourcenew: 
  The paginator element of this object is empty : 
  How can I use the angular material paginator without creating any interface? </p>
  
  <p>Update : </p>
  
  <p>With David's suggestion : 
  I have added MatPaginator to the main app module's imports. Now the pagination block is showing perfectly.</p>
  
  <p>But the Current Records shows as "0 of 0". even though I have 14 records, and Pagination functions like changing number of records,next, previous etc are not working. What I am missing? </p>
  
  <p>Update 2: I have applied the property Length to paginator tags.Now The pagination is working fine. The issue is that now the datatable is not changing the current no. of rows. </p>
  
  <p>Update 3: As per the suggestion from Pierre Mallet I have done the needed changes. and now without explicitly telling the [length] total record is getting inferred from the api response. Also the paginator is correctly binded with my     <code>this.matdatasource = new MatTableDataSource([]);</code> So no explicit codding is done till now to achieve this. </p>
  
  <p>Now I just want to fetch few records initially (lets say 20) and then want to do database call from subsequent requests, so that I don't need to hit the db at once for all the records. How to achieve this? </p>