title: How do I apply paginator and sorting to my mat-table if im defining dataSource as dataSource: any[]?
body: <p>I just finished making a mat-table that populates itself through an http API call; it worked normally; but now I'm trying to add pagination and sorting and im getting an error (multiple actually) like this &quot;Property 'paginator' does not exist on type 'any[]'.48     this.dataSource.paginator = this.paginator;&quot; This is due to the fact I define DataSource as 'any'; but I had no way around this as my DataSource is pulling data from an API and I cannot define the data as anything. Here is my code.</p>
  <pre><code>import { Component } from '@angular/core';  
  import {ServiceService} from './service.service';  
  import { FormGroup, FormControl, Validators } from '@angular/forms';
  import { MatTableModule } from '@angular/material/table';
  import { MatTableDataSource } from '@angular/material/table';
  import { MatPaginator } from '@angular/material/paginator';
  import { MatSort } from '@angular/material/sort';
  import { ViewChild } from '@angular/core';
  @Component({  
    selector: 'app-root',  
    templateUrl: './app.component.html',  
    styleUrls: ['./app.component.css']  
  })  
  export class AppComponent {  
    title = 'EmployeeFE';  
       
    constructor(private ServiceService: ServiceService) { }  
    data: any;  
    EmpForm: FormGroup;  
    submitted = false;   
    EventValue: any = &quot;Save&quot;;  
    dataSource: any[];
    displayedColumns: string[] = [
      &quot;eId&quot;,
      &quot;eName&quot;,
      &quot;eAddress&quot;,
      &quot;eAge&quot;,
      &quot;editAction&quot;,
      &quot;deleteAction&quot;
    ];
  
    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
    @ViewChild(MatSort, { static: true }) sort: MatSort;
  
    ngOnInit(): void {  
      this.getdata();  
  
      this.EmpForm = new FormGroup({  
        eId: new FormControl(null),  
        eName: new FormControl(&quot;&quot;,[Validators.required]),        
        eAddress: new FormControl(&quot;&quot;,[Validators.required]),  
        eEmail:new FormControl(&quot;&quot;,[Validators.required]),  
        eAge: new FormControl(&quot;&quot;,[Validators.required]),  
      })    
    }
  
    ngAfterViewInit() {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }
  
    applyFilter(event: Event) {
      const filterValue = (event.target as HTMLInputElement).value;
      this.dataSource.filter = filterValue.trim().toLowerCase();
  
      if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
      }
    }
  
    getdata() {  
      this.ServiceService.getData().subscribe((data: any[]) =&gt; {  
        this.data = data;
        this.dataSource = data;
      })  
    }  
  
  
  } 
  </code></pre>
  <p>Any ideas?</p>