title: Angular mat-paginator page size not working correctly
body: <p>I have created a mat-paginator element for a mat-table. My issue is that the paginator is not correctly displaying the page size. It will display all the results on one page, despite the page size being 5.Here I am making a request to an API to get a list of transactions, then adding them to a list to be displayed in the table. I have tried all the possible solutions I have found with no success.</p>
  
  <pre><code>export class txns implements OnInit {
        ELEMENT_DATA: ISalesOrders[] = []; 
        displayedColumns = ['type', 'source', 'amount']; 
        panelOpenState: boolean = false; 
  
        expandedElement: any;
        dataSource = new MatExpandTableDataSource(this.ELEMENT_DATA);
        config:any; //App Configuration
        errorLoading:boolean = false; 
        doneLoading:boolean = false; 
  
  
  
  
      @ViewChild('paginator') paginator: MatPaginator;//Creates horizontal link with paginator
  
      isExpansionDetailRow = (i: number, row: Object) =&gt; 
      row.hasOwnProperty('detailRow');//Determines whether the the row is expandable.
  
  /**
   * Similar to constructor, NgINIT will wait until components dependencies are loaded.
   */
  ngOnInit() {
      this.getMonthlySalesTransactions(3).subscribe(data =&gt; {
          console.log(data);
          data.forEach((data) =&gt; {
              if(data.result === 0) {
                  let results = data.objs as ISalesOrders[];
                  results.forEach(elem =&gt; {
                      this.ELEMENT_DATA.push(elem);
                  });
  
  
  
              } else {
                  this.errorLoading = false;
              }
              this.doneLoading = true;
  
  
          });
          this.dataSource = new MatExpandTableDataSource(this.ELEMENT_DATA);
          this.dataSource.paginator = this.paginator;
  
      });
  
  
  
  }
  </code></pre>
  
  <p>And the html template:</p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8"&gt;
  &lt;p&gt;{{ 'desc.recent-txns' | translate }}&lt;/p&gt;
  &lt;mat-progress-bar mode="indeterminate" *ngIf="!doneLoading"&gt;&lt;/mat-progress-bar&gt;
  &lt;h1 *ngIf="doneLoading &amp;&amp; ELEMENT_DATA.length == 0"&gt;{{ 'no-transactions' }}&lt;/h1&gt;
  &lt;mat-table #table [dataSource]="dataSource" *ngIf="ELEMENT_DATA.length != 0"&gt;
  
      &lt;!-- Position Column --&gt;
      &lt;ng-container matColumnDef="type"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; {{ 'transaction-type' | translate }} &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{ element.Brand_Group }} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Name Column --&gt;
      &lt;ng-container matColumnDef="source"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; {{ 'source' | translate }} &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{ element.Source_Account_Name }} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Weight Column --&gt;
      &lt;ng-container matColumnDef="amount"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; {{ 'amount' | translate }} &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{ element.Original_Amount | currency:config.currencyCode}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="expandedDetail"&gt;
          &lt;mat-cell *matCellDef="let detail"&gt;
              {{ 'transaction-id' | translate }}: {{ detail.element.Transaction_ID }} &lt;br&gt;
              {{ 'timestamp' | translate }}: {{ detail.element.Transaction_Time | date }} &lt;br&gt;
              {{ 'status' | translate }}: {{ detail.element.Status }} &lt;br&gt;
              {{ 'source-fees' | translate }}: {{ detail.element.Source_Fees_1 | currency:config.currencyCode }} &lt;br&gt;
          &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;"
                       matRipple
                       class="element-row"
                       [class.expanded]="expandedElement == row"
                       (click)="expandedElement = row"&gt;&lt;/mat-row&gt;
      &lt;mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
                       [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
                       style="overflow: hidden"&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;
  </code></pre>
  
  <p></p>
  
  <p>Result:</p>
  
  <p><a href="https://imgur.com/a/5WS0i4m" rel="noreferrer">https://imgur.com/a/5WS0i4m</a></p>
  
  <p>but I only want 5 elements per page. any help is appreciated</p>
  
  <p>i also want to have the ability to expand rows on click, so I created MatExpandTableDataSource class to let me do this. I believe this is were the problem is happening. If I switch to use MatTableDataSource it works, but it does not work properly when using this class.</p>
  
  <p>`</p>
  
  <pre><code>export class MatExpandTableDataSource extends MatTableDataSource&lt;any&gt; {
  /** Connect function called by the table to retrieve one stream containing 
  the data to render. */
  ELEMENT_DATA: ISalesOrders[];
  
  /**
   * Constructor for ExpandableTableDataSource
   * @param ELEMENT_DATA
   */
  constructor(ELEMENT_DATA: ISalesOrders[]) {
      super();
      this.ELEMENT_DATA = ELEMENT_DATA;
  }
  
  /**
   * Returns list of details listed inside expandable item
   * @returns {any} Observable&lt;Element[]&gt;
   */
  connect(): any {
      const rows:any = [];
      this.ELEMENT_DATA.forEach(element =&gt; rows.push(element, { detailRow: true, element }));
      return of(rows);
  }
  
  disconnect() { }
  </code></pre>
  
  <p>}</p>