title: angular material pagination not working with expandable row
body: <p>I'm trying to use angular material table with expandable rows with paginator, the problem is, with the custom connect MatTableDataSource used for the expandable row the pagination stops working, I didn't find the answers anywhere to the problem.</p>
  
  <p>So, the test table data is given by this stub service:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { TableRow } from './table-row';
  import { Observable, of } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class TestTableService {
  
    private testData : TableRow[] = [
      {id:1, name:'pi', value:3.14},
      {id:2, name:'euler', value:2.71},
      {id:3, name:'Feigenbaum constant', value:2.50290},
      {id:4, name:'Mills constant', value:1.30637},
      {id:5, name:'one', value:1},
      {id:6, name:'square root of 2', value:1.41421}
    ];
  
    constructor() { }
  
    public getData() : Observable&lt;TableRow[]&gt;
    {
      return of(this.testData);
    }
  }
  </code></pre>
  
  <p>the table component is:</p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { TestTableService } from './../test-table.service';
  import { TableRow } from './../table-row';
  import {MatPaginator, MatTableDataSource} from '@angular/material';
  import { Observable, of} from 'rxjs';
  import { animate, state, style, transition, trigger } from '@angular/animations';
  
  @Component({
    selector: 'app-test-table',
    templateUrl: './test-table.component.html',
    styleUrls: ['./test-table.component.css'],
    animations: [
      trigger('detailExpand', [
        state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
        state('expanded', style({ height: '*', visibility: 'visible' }))
      ]),
    ],
  })
  export class TestTableComponent implements OnInit {
    tableData : myDataSource&lt;TableRow&gt; = new myDataSource();
    columnsToDisplay = ['id', 'name','value'];
    isExpansionDetailRow = (i: number, row: Object) =&gt; row.hasOwnProperty('detailRow');
    expandedElement = null;
  
    constructor(private testTable : TestTableService) { }
  
    @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
      this.paginator = mp;
      this.tableData.paginator = this.paginator;
    }
  
    //@ViewChild(MatPaginator) paginator: MatPaginator;
  
    ngOnInit() {
      this.testTable.getData()
        .subscribe(table =&gt; this.tableData.data = table);
      //this.tableData.paginator = this.paginator;
    }
  
    expand(row){
      this.expandedElement = this.expandedElement == row ? null : row;
    }
  
    //setTimeout(() =&gt; this.tableData.paginator = this.paginator);
  
  }
  </code></pre>
  
  <p>Notice how I've already tried many solutions involving assigning the paginator <a href="https://i.stack.imgur.com/t0Jwk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t0Jwk.png" alt="but still the result given is this"></a>.</p>
  
  <p>the html of the component:</p>
  
  <pre><code>&lt;table mat-table [dataSource]="tableData"&gt;
    &lt;ng-container matColumnDef="id"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Id &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt; {{row.id}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="name"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Name &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt; {{row.name}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="value"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Value &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt; {{row.value}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="details"&gt;
      &lt;td mat-cell *matCellDef="let detail"&gt; 
        &lt;!--
        &lt;app-test-table-detail [show]="detail.element == expandedElement" &gt;&lt;/app-test-table-detail&gt;
          --&gt;
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="columnsToDisplay"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: columnsToDisplay"
      matRipple
      (click)="expand(row)"&gt;&lt;/tr&gt;
  
    &lt;tr mat-row *matRowDef="let row; columns: ['details']; when:isExpansionDetailRow"
      [@detailExpand]="row.element==expandedElement ? 'expanded' : 'collapsed'"
      style="overflow: hidden"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;mat-paginator [pageSizeOptions]="[3, 10, 20]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  </code></pre>
  
  <p>interestingly, the paginator gives the correct numbers but have no effect, should I deal with it in the stream? in the connect function?</p>
  
  <p>[edit]
  latest code at stackblitz</p>
  
  <p><a href="https://stackblitz.com/edit/angulartableexample?file=src%2Fapp%2Ftest-table%2Ftest-table.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angulartableexample?file=src%2Fapp%2Ftest-table%2Ftest-table.component.html</a></p>
  
  <p>I also tried what the guy that deleted the comment recommends, which was to use AfterViewInit, also didn't work</p>
  
  <p>[Edit]
  by debugging a case that doesn't have this problem (without expandable rows) the difference is in this snippet of code, with expandable rows using my own version of DataSource there is no observers, but using the native there is, am I missing something in the definition of my data source?</p>
  
  <p><a href="https://i.stack.imgur.com/iLish.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iLish.png" alt="enter image description here"></a></p>