title: using mat-paginator with mat-table using observable array as the datasource
body: <p>I am using an observable array as the datasource. This works fine except that i am unable to figure out how to use paginator now. below is the html and ts</p>
  
  <p>html</p>
  
  <pre><code> &lt;table mat-table #TABLE [dataSource]="cards" class="mat-elevation-z8"&gt;          
                  &lt;!-- Email Column --&gt;
               &lt;ng-container matColumnDef="date"&gt;
                  &lt;th mat-header-cell *matHeaderCellDef  class="tbl-th"&gt; Date &lt;/th&gt;
                  &lt;td mat-cell *matCellDef="let element"&gt; {{core.pretifyDate(element.date)}} &lt;/td&gt;
                &lt;/ng-container&gt;
  
              &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
              &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
            &lt;mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100]" [pageSize]="pageSize" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  </code></pre>
  
  <p>.ts</p>
  
  <pre><code>export class CardQueueComponent implements OnInit {
  
    @ViewChild('TABLE', {static: false}) table: MatTable&lt;any&gt;;
    @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  
    displayedColumns: string[] = [ 'image', 'customer', 'email',  'date', 'process' ];
    cards: Observable&lt;Card[]&gt; 
    pageSize = 5
  
  
    constructor(public dataSvc: SBDataService,
                public core:CoreService,
                private changeDetectorRefs: ChangeDetectorRef,
                ) { }
  
      async ngOnInit() {
  
        this.cards = this.dataSvc.fetchCards().pipe(
          map((cards: any) =&gt; cards.map(cardObj =&gt; {
            var c = new Card(cardObj.key, cardObj._frontImageUrl, cardObj._date, cardObj._rawData)
  
          return c
        }))
      );
  
  
      this.changeDetectorRefs.detectChanges();
  
      //this.dataSource.paginator = this.paginator;
  
    }
  
  }
  </code></pre>
  
  <p>so the last commented line on paginator is something i need to figure out with after i directly associated cards observavble. Please advise</p>