title: Material Angular Table not sorting
body: <p>Good Evening,
  I am rendering data from an API in a Material Angular Table. The data shows, and the sorting works, but once I put &quot;dataSource.filteredData|slice:10&quot; my sorting stops working.
  I am just trying to only dynamically show 10 rows.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
  import { NasaApiService} from '../nasa-api.service';
   import {HttpClient} from '@angular/common/http';
  import { MatTable } from '@angular/material/table';
  import { MatSort } from '@angular/material/sort'
  import { MatTableDataSource } from '@angular/material/table';
  
  const api = 'https://data.nasa.gov/resource/gh4g-9sfh.json';
  
  @Component({
    selector: 'app-nasa',
    templateUrl: './nasa.component.html',
    styleUrls: ['./nasa.component.css']
  })
  export class NasaComponent implements OnInit {
   data;
  dataSource;
  displayedColumns: string[] = ['name', 'nametype', 'id', 'year', 'recclass'];
  @ViewChild(MatSort, {static: false}) sort: MatSort;
  
    constructor(private _nasa: NasaApiService) { 
     
    }
  
    ngOnInit(){
    this._nasa.getNasaData().subscribe(data =&gt; {
      this.data = data;
      this.dataSource = new MatTableDataSource(this.data);
      this.dataSource.sort = this.sort;
      console.log(this.data);
    
  
    })
  
    }
    ngAfterViewInit() {
    
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table mat-table [dataSource]="dataSource.filteredData|slice:0:10" matSort class="mat-elevation-z8"&gt;
  
  
   
  &lt;ng-container  matColumnDef="name"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Name &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.name}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
     
      &lt;ng-container matColumnDef="nametype"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Name-Type &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.nametype}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
  
      &lt;ng-container matColumnDef="id"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; ID &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.id}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
  
      &lt;ng-container matColumnDef="year"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Year &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.year}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
  
      &lt;ng-container matColumnDef="recclass"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Recclass &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.recclass}}&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;div&gt;
          &lt;table class="ui celled table"&gt;
              &lt;thead&gt;
                  &lt;tr &gt;
                   &lt;th &gt;Name&lt;/th&gt;
                    &lt;th&gt;Name Type&lt;/th&gt;
                    &lt;th&gt;Id&lt;/th&gt;
                    &lt;th&gt;Year&lt;/th&gt;
                    &lt;th&gt;recclass&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr *ngFor="let info of data  | slice:0:10; let i=index" &gt;
                      &lt;td scope="col"&gt; {{info.name}} &lt;/td&gt;
                      &lt;td scope="col"&gt; {{info.nametype}} &lt;/td&gt;
                      &lt;td scope="col"&gt; {{info.id}} &lt;/td&gt;
                      &lt;td scope="col"&gt; {{info.year}} &lt;/td&gt;
                      &lt;td scope="col"&gt; {{info.recclass}} &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>API data in a Material Angular Table. I have the data rendered and the sorting solution implemented, but when I put |slice:10 my sorting stops working. Any advice?</p>