People who want paging and sorting on client side please refer this link
Here is what I tried. The data is loading in the console. but it is not displayed on the grid or mat table.
I don't have any error in the console. I am able to see the data in the console but the data is not loaded into the grid.
Can somebody tell me what am I doing wrong?
The actual database from where data is emitted out.
export class FormsDatabase {
formsList = new BehaviorSubject([]);
get data(){
return this.formsList.value;
}
constructor(private _formsServicedata: FormsService){
this._formsServicedata.getAllFormData('').subscribe((form)=>{
console.log("Form DataSource: ");
this.formsList.next(form);
})
}
}
export class FormDataSource extends DataSource<any>{
constructor( private formsDb: FormsDatabase,public
paginator:MatPaginator , public sort: MatSort
) {
super()
}
connect():Observable<any>{
const formsData=[
this.formsDb.formsList ,
this.sort.sortChange
];
return Observable.merge(...formsData).map(()=>{
this.getSortedData();
})
}
Sort Function to sort the data
getSortedData(){
const data = this.formsDb.data.slice();
if(!this.sort.active || this.sort.direction==''){ return data;}
return data.sort((a,b)=>{
let propertyA:number|string='';
let propertyB:number|string='';
switch(this.sort.active)
{
case 'formname': [propertyA,propertyB]=
[a.formname,b.formname];break;
case 'displaytext': [propertyA,propertyB]=
[a.displaytext,b.displaytext];break;
case 'sortorder': [propertyA,propertyB]=
[a.sortorder,b.sortorder];break;
}
let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
let valueB = isNaN(+propertyB) ? propertyB : +propertyB;
return (valueA < valueB?-1:1)*(this.sort.direction=='asc'?1:-1);
});
}
disconnect() { }
}
HTML
<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="formname">
<mat-header-cell *matHeaderCellDef mat-sort-header> FORM NAME
</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.formname}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="displaytext">
<mat-header-cell *matHeaderCellDef mat-sort-header> DISPLAY TEXT </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.displaytext}} </mat-cell>
</ng-container>
<ng-container matColumnDef="sortorder">
<mat-header-cell *matHeaderCellDef mat-sort-header> SORT ORDER</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.sortorder}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]"
[showFirstLastButtons]="true">
</mat-paginator>
</div>
Service:
Forms Service has the below method which returns the forms list as observable
getAllFormData(orderBy:string) {
return this.af.list('/forms');
}
How to show no records found in Mat Table Angular? Assuming this is your code where you are making the API call and creating the mat table data source. Now based on the dataSource being null or not you can show the table or no records message in your HTML file.
By default, the MatTableDataSource sorts with the assumption that the sorted column's name matches the data property name that the column displays. For example, the following column definition is named position , which matches the name of the property displayed in the row cell.
Add an ngIf="dataSource"
in the <mat-table>
tag.
This problem occurs if the data is asynchronous. the DOM is getting loaded before the data is fetched.
Check the dataSource
before rendering the DOM.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With