How do I apply paginator and sorting to my mat-table if im defining dataSource as dataSource: any[]?

Question

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 "Property 'paginator' does not exist on type 'any[]'.48 this.dataSource.paginator = this.paginator;" 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.

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 = "Save";  
  dataSource: any[];
  displayedColumns: string[] = [
    "eId",
    "eName",
    "eAddress",
    "eAge",
    "editAction",
    "deleteAction"
  ];

  @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("",[Validators.required]),        
      eAddress: new FormControl("",[Validators.required]),  
      eEmail:new FormControl("",[Validators.required]),  
      eAge: new FormControl("",[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[]) => {  
      this.data = data;
      this.dataSource = data;
    })  
  }  


} 

Any ideas?

Answer 1

Declaration should be

dataSource = new MatTableDataSource<any>()

Set data in dataSource

this.dataSource.data = data; 

Updated 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 = "Save";  
  public dataSource = new MatTableDataSource<any>()
  displayedColumns: string[] = [
    "eId",
    "eName",
    "eAddress",
    "eAge",
    "editAction",
    "deleteAction"
  ];

  @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("",[Validators.required]),        
      eAddress: new FormControl("",[Validators.required]),  
      eEmail:new FormControl("",[Validators.required]),  
      eAge: new FormControl("",[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[]) => {  
      this.data = data;
      this.dataSource.data = data;
    })  
  }  


}