mat-filtering/mat-sort not work correctly when use ngif in mat-table parent

mat-table default sort
mat-table ngif
mat-sort-header change icon
angular material table sort multiple columns
angular material table custom sort
sorting in angular 7
angular 6 sort table by column

Note that paging/sort not work correctly. Paging does not show the number of elements it is showing and sorting does not work, but if you delete the line in the html file *ngIf="dataSource?.filteredData.length > 0" the error is fixed. If you use filtering, it works, but it does not show the filter amount

Check the example.

In your component.ts, replace this code

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

ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

with this :

  private paginator: MatPaginator;
  private sort: MatSort;

  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;

  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;

  setDataSourceAttributes() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

And in your html:

    <mat-card *ngIf="!dataSource?.filteredData.length" style="margin-bottom: 5px">
        <div><span>ZERO RESULT</span></div>

    <mat-card *ngIf="dataSource?.filteredData.length">
    ** insert the table code that you have **

mat-filtering not show correct data when use ngif in mat-table parent , mat-filtering not show correct data when use ngif in mat-table parent #11716 EDIT: Also, changing the number of items per page does not work In this case, you are telling the paginator and sort to not enter the view until  avechuche changed the title mat-filtering not show correct data when use ngif in parend mat-table mat-filtering not show correct data when use ngif in mat-table parent Jun 8, 2018 This comment has been minimized.

This can be solved by the following strategy:

dataSource = new MatTableDataSource();

@ViewChild(MatSort, {static: false}) set content(sort: MatSort) {
  this.dataSource.sort = sort;

Now even if you use *ngIf, it will work.

[MatTable], [MatSort] Sorting stops work if table has *ngIf attribute , Sorting should work correct. *ngIf makes sorting not work. [MatTable], [​MatSort] Sorting stops work if table has *ngIf attribute #15008. 22 mat-filtering/mat-sort not work correctly when use ngif in mat-table parent Jun 8 '18 9 Angular 4: changing url, but component is not rendered Apr 9 '18 5 Angular mat-table weird alignment with cells containing long strings May 31 '18

Adding <tr> tag in your html code and adding mat-sort-header="fieldname" you can get resolved.

Angular 6 - Ng-Template inside Mat-table is not working, Angular 6 - Ng-Container - Ng-Template inside Mat-table is not working - css. Action </th> <td mat-cell *matCellDef="let element"> <i *ngIf="element. MatTable } from '#angular/material'; /** * #title Table with filtering mat-table use [formGroupName] so that the form fields can be referenced by its correct form path? We have been implementing grid using mat-table and for each cell, there is a mat-tooltip.As far as I know, tool-tip renders for each cell even though user will hover over it or not. see the sample code for usage of tooltip.

Sort header, The matSort and mat-sort-header are used, respectively, to add sorting state and to a set of table headers, add the <mat-sort-header> component to each header a parent element with the matSort directive, which will emit a matSortChange not required to set a mat-sort-header id on because by default it will use the id  Angular – How to use ngif-else with table to display td based on condition Posted on October 12, 2019 by ayobamilaye I am working on a web project using angular-7 as the frontend.

Expandable Rows in Mat-Table programmed with Angular , We have used Expandable Rows in Mat-Tables when we wanted to provide extra <th mat-header-cell *matHeaderCellDef mat-sort-header> Currency Code </th​> Next, add the row definitions for the parent row and the child row. The code tr.example-element-row:not(.example-expanded-row):hover {. I have multiple div elements in my form. I have to reorder my div elements dynamically in UI by drag and drop For ex : below is my 6 div elements <div>Div1</div> <div

Matsort example, Check the DOM and see if the sorting_asc and sorting_desc are not correctly being applied The data table will support pagination, sorting, filtering and row selection Step 1: Add matSort directive in table tag as below Notice: Undefined index: whether to use the hidden attribute directive or the ngIf structural directive. I faced an issue when I register signup failed so Why does registration returns the message “Signup failed” while signup was successful? and users are added into database Can someone help me to sol…

  • do you want to have that *ngIf condition?
  • @yer hi!, Yes, I need it to hide the table when there are no results and show another message
  • you can use this *ngIf="dataSource?.filteredData" instead.
  • @yer Works! but not quite correctly. I updated the example with another link
  • could you tell what is not working correctly now?
  • For anyone looking for more explanation, this answer helps a bit; the { static: false } option is for Angular 8+