title: Set MatPaginator and MatSort in MatTableDataSource after getting data using ajax call
body: <p>Sorting and pagination is not working after getting the value from backend using Ajax.</p>
  
  <p>I am using following version:</p>
  
  <p>Angular: 5.2.7
  Material: 5.2.4
  TypeScript: 2.5.3</p>
  
  <p><strong>My Code snippet:</strong></p>
  
  <pre><code>&lt;div class="form-created-by-me-header"&gt;
          &lt;mat-form-field&gt;
              &lt;input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
  
      &lt;div class="form-created-by-me-container mat-elevation-z8"&gt;
  
          &lt;mat-table [dataSource]="dataSource" matSort&gt;
  
              &lt;!-- ID Column --&gt;
              &lt;ng-container matColumnDef="id"&gt;
                  &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; ID &lt;/mat-header-cell&gt;
                  &lt;mat-cell *matCellDef="let row"&gt; {{row.id}} &lt;/mat-cell&gt;
              &lt;/ng-container&gt;
  
              &lt;!-- Name Column --&gt;
              &lt;ng-container matColumnDef="name"&gt;
                  &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Name &lt;/mat-header-cell&gt;
                  &lt;mat-cell *matCellDef="let row"&gt; {{row.name}} &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-paginator [pageSizeOptions]="[1, 5, 10, 25, 100]"&gt;&lt;/mat-paginator&gt;
  
      export class FormCreatedByMeComponent {
  
        cratedFormsByMe: Array&lt;SurveyForm&gt;;
        dataSource: MatTableDataSource&lt;SurveyForm&gt; = new MatTableDataSource();
  
  
        public displayedColumns = ['id', 'name', 'description', 'questionCount', 'sharedWith', 'createdBy', 'createdDate', 'editBtn', 'deleteBtn'];
  
        @ViewChild(MatPaginator) paginator: MatPaginator;
        @ViewChild(MatSort) sort: MatSort;
  
        constructor(private formService: SurveyFormService) {
          this.getCreatedFormsByMe();
        }
  
        private getCreatedFormsByMe(): void {
          this.formService.getCreatedFormsByMe().subscribe(
            cratedFormsByMe =&gt; {
              this.cratedFormsByMe = cratedFormsByMe;
              this.dataSource = new MatTableDataSource(this.cratedFormsByMe);
              this.dataSource.paginator = this.paginator;
              this.dataSource.sort = this.sort;
            });
        }
  
  
        applyFilter(filterValue: string) {
          filterValue = filterValue.trim(); // Remove whitespace
          filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
          this.dataSource.filter = filterValue;
        }
  
      }
  </code></pre>
  
  <p>In the above case nothing is happening. Please correct me if I am missing anything.</p>