I am experiencing issues while trying to incorporate a component using mat-table with data source from a Remote Server. The table is not displaying the data as expected.
html
<div class="mat-elevation-z8">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]="dataSource" matSort style="width: 100%;">
<ng-container matColumnDef="accountType">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Account Type </th>
<td mat-cell *matCellDef="let e"> {{e.accountType}} </td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let e"> {{e.id}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';
import { HeadAccount } from '../../Data/HeadAccount';
import { HeadAccountsService } from '../../Services/head-accounts.service';
import { AfterViewInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-head-accounts',
templateUrl: './head-accounts.component.html',
styleUrls: ['./head-accounts.component.css']
})
export class HeadAccountsComponent implements OnInit {
constructor(private haser: HeadAccountsService) { }
ngOnInit() {
this.gets();
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
has: HeadAccount[];
dataSource = new MatTableDataSource(this.has);
columnsToDisplay: string[] = ['accountType', 'id'];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
gets(): void {
this.haser.gets()
.subscribe(has => this.has = has);
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
However, if I modify dataSource directly to has, such as [dataSource]="has", the data appears but other features like pagination, sorting, and filtering are not working properly.
In App Module, ensure that you have imported and exported
MatTableModule, MatPaginatorModule,MatSortModule.