title: Mat-table, mat-sort is not working properly
body: <p>I tried to implement mat-sort in mat-table, in my project. After starting my project, I see "sort" icon, can click on it, but nothing sorting in my result, always that same view.</p>
  
  <p>component-file:</p>
  
  <pre><code>@Component({
    selector: 'app-test-component',
    templateUrl: './testComponent.component.html',
    styleUrls: ['./testComponent.component.css'],
    providers: [TestService],
  })
  
  export class TestComponent implements OnInit, OnDestroy, AfterViewInit {
  
    displayedColumns = ['Column1'];
  
    dataSource = new MatTableDataSource&lt;UserModel&gt;();
    private exDisplayNames: Subscription;
  
  
    @ViewChild(MatSort) sort: MatSort;
  
    constructor(private testService: TestService) {   }
  
    ngOnInit() {
      this.exDisplayNames = this.testService.userNamesChanged.subscribe((userNameData: UserModel[]) =&gt; {
        this.dataSource.data = userNameData;
      });
      this.testService.fetchUserName();
    }
  
    ngAfterViewInit() {
      this.dataSource.sort = this.sort;
    }
  
    ngOnDestroy() {
  
      if (this.exDisplayNames) {
          this.exDisplayNames.unsubscribe();
      }
    }
  
   }
  </code></pre>
  
  <p>service file:</p>
  
  <pre><code>@Injectable()
  export class TestService {
  
  
      userNamesChanged = new Subject&lt;UserModel[]&gt;();
      private availableUserName: UserModel[] = [];
  
  
      private fbSubs: Subscription[] = [];
  
      constructor(private db: AngularFirestore) { }
  
  
      fetchUserName() {
          this.fbSubs.push(this.db.collection('names/')
              .snapshotChanges()
              .map(docArray =&gt; {
                  return docArray.map(doc =&gt; {
                      return {
                          displayUserName: doc.payload.doc.data().nick,
                      };
                  });
              })
              .subscribe((userData: UserModel[]) =&gt; {
                  this.availableUserName = userData;
                  this.userNamesChanged.next([...this.availableUserName]);
              }, error =&gt; {
                  console.log(error);
              }));
      }
  
  }
  </code></pre>
  
  <p>html file:</p>
  
  <pre><code>&lt;section fxLayoutAlign="center"&gt;
    &lt;mat-card&gt;
      &lt;mat-card-content&gt;
        &lt;mat-table [dataSource]="dataSource" matSort&gt;
  
          &lt;ng-container matColumnDef="Column1"&gt;
            &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Nick&lt;/mat-header-cell&gt;
            &lt;mat-cell fxLayout="row" fxLayoutAlign="center center" *matCellDef="let element"&gt;{{ element.displayUserName}}&lt;/mat-cell&gt;
          &lt;/ng-container&gt;
  
          &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
          &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
        &lt;/mat-table&gt;
      &lt;/mat-card-content&gt;
    &lt;/mat-card&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Also was imported all necessary material modules:  <code>MatSortModule, MatTabsModule</code>.</p>
  
  <p>My steps are:
  1. Added in component: <code>@ViewChild(MatSort) sort: MatSort</code>.
  2. Implements AfterViewInit.
  3. Added:</p>
  
  <pre><code>ngAfterViewInit() {
     this.dataSource.sort = this.sort;
   }
  </code></pre>
  
  <ol start="4">
  <li>In html file added: matSort in <code>&lt;mat-table&gt;</code>.</li>
  <li>Added mat-sort-header to <code>&lt;mat-cell-header&gt;</code>.</li>
  </ol>
  
  <p>Like I wrote: I see sort icon on the column, but after clicking - nothing changing, nothing sorting.</p>