title: Angular 2+ filter *ngFor table with Material Paginator
body: <p>I have a big, complex custom table, with many nested rows visible on user clicks and many other actions. I need to paginate that table, to show items per page selector and the "result number" for every page </p>
  
  <p>(something like <a href="https://i.stack.imgur.com/ex28m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ex28m.png" alt="paginator example"></a>)</p>
  
  <p>I found <a href="https://material.angular.io/components/paginator/api" rel="nofollow noreferrer">angular material paginator component</a> (the image above is that component in reality) which seems perfect to me, but I can't go over importing the component. How do I bind page change event to my custom table ? 
  I've searched angular material website but I did not found any useful example. The only is <a href="https://material.angular.io/components/table/overview" rel="nofollow noreferrer">this table example</a> which involves other material component I can't use. </p>
  
  <p>Any help ? </p>
  
  <p>Here is the paginator tag</p>
  
  <pre><code>&lt;mat-paginator [length]="this.state?.unitaDocByMap.length"
                 [pageSize]="pageSize"
                 [pageSizeOptions]="pageSizeOptions"
                 (page)="pageEvent = $event"&gt;
  &lt;/mat-paginator&gt;
  </code></pre>
  
  <p>And here is an extract of my table </p>
  
  <pre><code> &lt;ng-container *ngFor="let unitaDoc of this.state?.unitaDocByMap &gt;
        &lt;tr&gt;
        &lt;td&gt;{{unitaDoc?.nome}}&lt;/td&gt;
        &lt;td *ngFor="let ist of unitaDoc?.istanzeMetadato;"&gt;
          {{ist?.valore}}
        &lt;/td&gt;
        &lt;td&gt;
  
          &lt;button type="button" class="btn btn-primary" title="Visualizza Documenti UD"
                  (click)="getCustomDocumentiRow(unitaDoc?.id); hide(this.i); this.avviato = false"
                  [attr.id]="'but'+this.i"&gt;
            &lt;i class="fa fa-eye" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr [hidden]="!hideme[this.i]" [attr.id]="this.i"&gt;
        &lt;td [attr.colspan]="this.dimensione"&gt;
          &lt;div class="panel panel-default"&gt;
            &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;Documenti&lt;/h4&gt;
            &lt;/div&gt;
  
            &lt;div class="panel-body"&gt;
  
              &lt;table class="table table-responsive table-hover"&gt;
                &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Funzione documento&lt;/th&gt;
                  &lt;th&gt;Versione&lt;/th&gt;
                  &lt;th&gt;VDC&lt;/th&gt;
                  &lt;th&gt;SIP&lt;/th&gt;
                  &lt;th&gt;Elementi&lt;/th&gt;
                &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                &lt;tr *ngFor="let doc of this.state?.docCustom;"&gt;
  
  .... and so on
  </code></pre>
  
  <p>As you see, I can't convert the table. Maybe I can use another paginator, but I can't find any other capable of changing results per page and which show result numbers listed in every page.</p>