title: ERROR TypeError: Cannot set property 'paginator' of undefined
body: <p>I am creating a table using table Angular material
  for reference I am using this example <a href="https://material.angular.io/components/table/examples" rel="noreferrer">https://material.angular.io/components/table/examples</a></p>
  
  <p>Here is what I have so far:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"&gt;
    &lt;/mat-form-field&gt;
  
    &lt;div class="mat-elevation-z8"&gt;
      &lt;table mat-table [dataSource]="dataSource" matSort&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 row"&gt; {{row.name}} &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 row"&gt; {{row.id}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
  
        &lt;ng-container matColumnDef="release"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Release&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt; {{row.first_air_date}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
  
        &lt;ng-container matColumnDef="description"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Description &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row" [style.color]="row.color"&gt; {{row.overview}} &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, 25, 100]"&gt;&lt;/mat-paginator&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Component .ts</p>
  
  <pre><code>import { Component, ViewChild, OnInit } from '@angular/core';
  import { MoviesService } from '../movies.service';
  import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
  import { DatatableComponent } from '@swimlane/ngx-datatable';
  
  @Component({
    selector: 'app-tv-shows',
    templateUrl: './tv-shows.component.html',
    styleUrls: ['./tv-shows.component.scss']
  })
  export class TvShowsComponent implements OnInit {
    displayedColumns: string[] = ['name', 'id', 'release', 'description'];
    dataSource: any;
    @ViewChild(DatatableComponent) table: DatatableComponent;
    constructor(private moviesService: MoviesService) {
      this.moviesService.getPopularTVShows().subscribe(res =&gt; {
        this.dataSource = res.results;
      });
    }
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
  
    ngOnInit() {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }
  
    applyFilter(filterValue: string) {
      this.dataSource.filter = filterValue.trim().toLowerCase();
  
      if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
      }
    }
  }
  </code></pre>
  
  <p>when I run my app data are displayed in a table perfectly but I get the following error : </p>
  
  <pre><code>ERROR TypeError: Cannot set property 'paginator' of undefined
  </code></pre>
  
  <blockquote>
    <p>So nothing works at all  neither sorting , filtering or pagination</p>
  </blockquote>
  
  <p>I need some help here:</p>
  
  <p>What am I doing wrong in my codes above? Any help will be appreciated.</p>