title: Creating datasource for nested object in Angular 8
body: <p>I am trying my hands on Angular for a project and I am stuck with creating a data source for my MatTable.</p>
  
  <p>The API that I am consuming sends response like this:</p>
  
  <pre><code>{
      data: [], //array of objects for samples
      total: 100, //total number of samples found
      pageSize: 10,
      pageIndex: 0
  }
  </code></pre>
  
  <p>My model for samples is:</p>
  
  <pre><code>//Model for a single sample
  export class Sample {
      id: number;
      name: string;
  }
  
  //a plural namespace is used for multiple samples returned from API
  export class Samples {
      samples: Sample[],
      total: number;
      pageSize: number;
      pageIndex: number;
  }
  
  // a const in case no samples were found
  export const NO_SAMPLES {
      total: 0,
      pageIndex: 0,
      pageSize: 0,
      samples: []
  }
  </code></pre>
  
  <p>Now when I am trying to integrated this with a data source like below:</p>
  
  <pre><code>... //required imports
  export class SamplesDataSource extends DataSource&lt;Samples&gt; {
  
  private samplesSubject = new BehaviorSubject&lt;Samples&gt;(NO_SAMPLES);
  
  public constructor(private samplesService: SamplesService) {
      super();
  }
  
  //this is where the error (described below) is showing
  connect(collectionViewer: CollectionViewer): Observable&lt;Samples&gt; {
      return this.samplesSubject.asObservable();
  }
  
  disconnect(collectionViewer: CollectionViewer): void {
      this.samplesSubject.complete();
  }
  
  getSamples() {
      this.samplesService.getSamples().pipe(
          catchError(err =&gt; {
              return of([]);
          })
      ).subscribe(
          samples =&gt; this.samplesSubject.next(samples)
      );
  
  }
  
  }
  </code></pre>
  
  <p>But it shows me error message:</p>
  
  <blockquote>
    <p>ERROR in src/app/shared/data-sources/samples-data-source.ts(20,5): error TS2416: Property 'connect' in type 'SamplesDataSource' is not assignable to the same property in base type 'DataSource'</p>
  </blockquote>
  
  <p>How can I handle this case.</p>
  
  <p>Please note, I need to retain <code>total</code>, <code>pageSize</code> and <code>pageIndex</code> for my paginator to work in align with the paginator at backend.</p>
  
  <p>Thanks in advance.</p>
  
  <h3>Edit</h3>
  
  <p>App component.ts</p>
  
  <pre><code>    ... //required imports
  export class AlertCasesComponent implements OnInit {
    ...
  
    samplesTableColumns: string[] = ['sampleId', 'sample'];
    samplesTablePageSizes: number[] = [10, 20, 50, 100];
    samplesDataSource: SamplesDataSource;
  
    ...
  
    constructor(samplesService: SamplesService) {
      ...
    }
  
    ngOnInit(): void {
        this.samplesDataSource = new SamplesDataSource(this.samplesService);
        this.samplesDataSource.getSamples();
        ...
    }
  
    ...
  
  }
  </code></pre>
  
  <p>App Component.html</p>
  
  <pre><code>&lt;mat-table class="..." [dataSource]="samplesDataSource.samples"&gt;
  
      .... //rows and columns implementations
  
  &lt;/mat-table&gt;
  
  &lt;mat-paginator [length]="samplesDataSource.total" pageIndex="0" [pageSize]="samplesDataSource.pageSize" [pageSizeOptions]="samplesTablePageSizes" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  </code></pre>