title: MatTable Expand Collapse Icon issue on pagination and sort
body: <p>I've a angular material table which uses detailRow directive to insert a detail/sibling adjacent row to a table row.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-material2-issue-z3pmzk" rel="noreferrer">StackBlitz</a></p>
  
  <p>I wanted to give it an appearance of as if the row is being expanded or collapsed, so I added couple of icons to it which are toggled on the click of cell containing them.</p>
  
  <pre><code>&lt;mat-header-cell *matHeaderCellDef&gt; Action &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; 
           &lt;button mat-icon-button color="primary"  (click)="element[i] = !element[i]"&gt;
              &lt;mat-icon id="expand_more"  #expand_more *ngIf="!element[i] "  &gt;expand_more&lt;/mat-icon&gt;
              &lt;mat-icon id="expand_less"  #expand_less *ngIf="element[i] "&gt;expand_less&lt;/mat-icon&gt;
            &lt;/button&gt; 
        &lt;/mat-cell&gt;
  </code></pre>
  
  <p>However if the I leave the row expanded and paginate or do a sort the icons do not toggle because there's no way for them to be toggled.</p>
  
  <p>I've tried hooking into the <code>page</code> event or the <code>sortChange</code> event but came up empty.</p>
  
  <p>I'm aware that there's new way to do expand/collapse in angular material v7 which probably works well with pagination and sort but its gonna be a while before I upgrade, in the mean time does anyone have any ideas on how to solve this.</p>