Having created a project on Angular CLI 7, I decided to incorporate Angular Material into it.

Despite adding modules for table pagination, expansion, filter, and sort in the app modules file, I am facing difficulties making the paginator, sorting, and filtering functionalities work. Can anyone help me figure out what might be causing this issue? I've been stuck on this for quite some time now.

Below are the files:

material.module.ts

import { NgModule } from '@angular/core';

import {
  MatCardModule,
  MatInputModule,
  MatButtonModule,
} from '@angular/material';

import {MatTableModule} from '@angular/material/table';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';

const modules = [
  MatCardModule,
  MatInputModule,
  MatButtonModule,
  MatPaginatorModule,
  MatTableModule,
  MatSortModule,
  MatExpansionModule
];

@NgModule({
  imports: modules,
  exports: modules,
})
export class MaterialModule { }

app.module.ts

import { NgModule } from '@angular/core';

import {
  MatCardModule,
  MatInputModule,
  MatButtonModule,
} from '@angular/material';

import {MatTableModule} from '@angular/material/table';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';

const modules = [
  MatCardModule,
  MatInputModule,
  MatButtonModule,
  MatPaginatorModule,
  MatTableModule,
  MatSortModule,
  MatExpansionModule
];

@NgModule({
  imports: modules,
  exports: modules,
})
export class MaterialModule { }

dashboard.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  animations: [
    trigger('detailExpand', [
      state('void', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
      state('*', style({ height: '*', visibility: 'visible' })),
      transition('void <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class DashboardComponent implements OnInit {

  public projectsResponse = {}
  public projectsGL: Project[]

  displayedColumns: string[] = ['bob_id', 'name', 'pod', 'version', 'v_env'];
  dataSource: MatTableDataSource<Project> = new MatTableDataSource<Project>(this.projectsGL);

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  isExpansionDetailRow = (index, row) => row.hasOwnProperty('detailRow');

  constructor(private _projectService: ProjectService) { }

  ngOnInit() {
    this._projectService.getProjects().subscribe(data => {
      this.projectsResponse = data;
      this.initializeProjects();
      this.dataSource = new MatTableDataSource<Project>(this.projectsGL);
      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;
  }
}
initializeProjects()
/* code to populate projectGL */

Dashboard.component.html

<div class="example-header">
    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
</div>

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="projectsGL" matSort>

        <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

        <!-- Position Column -->
        <ng-container matColumnDef="bob_id">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Bob Id </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.bob_id}} </mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.name}} </mat-cell>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="pod">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Pod </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.pod}} </mat-cell>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="version">
            <mat-header-cell *matHeaderCellDef mat-sort-header> version </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.version}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="v_env">
            <mat-header-cell *matHeaderCellDef mat-sort-header> v-env </mat-header-cell>
            <mat-cell *matCellDef="let project"> {{project.v_env}} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="project-row" [cdkDetailRow]="row" [cdkDetailRowTpl]="tpl">
        </mat-row>
    </mat-table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

<ng-template #tpl let-project>
    <div class="mat-row detail-row" [@detailExpand] style="overflow: hidden">
        The Envirent for {{project.name}} is {{project.env}}
    </div>
</ng-template>

Despite having included all the necessary modules, the paginator, sorting, and filtering features do not seem to be functioning properly.