Angular Material Table Sorting - Data Doesn't sort when inside a *ngIf condition

Question

I have a Angular Material Table. When I surround html for the table with a <div *ngIf="true"> the table renders but the data no longer sorts when clicking on the header column.

Taking the example from: https://material.angular.io/components/table/overview#sorting

And modifying it, just by adding the <div *ngIf="true"> ... </div> demonstrates this behavior. Example is at: https://stackblitz.com/edit/angular-quzvjv

Submitted an issue with Angular Material project - https://github.com/angular/material2/issues/14843 — Thomas Jahncke, Jan 15 '19 at 19:17

score 8 · Answer 1 · answered Jul 12 '19 at 22:06

Base on the solution Angular 5 Material Data Table sorting not working

In Angular 8, the @ViewChild decorator need a second argument {static: true|false}

In order to catch MatSort component after DOM rendered, set {static:false}:

export class TableSortingExample{

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

When set {static : true}, Angular Compiler consider this @ViewChild element is static, so it only obtain the element one time at ngOnInit(). Even if *ngIf triggered still can't catch the MatSort component.

See https://stackoverflow.com/a/56359612/11777581 by @PierreDuc

Thanks for this simple explanation - helped me out :) – Joe Keene Sep 30 '19 at 14:58 — Joe Keene, Sep 30 '19 at 14:58

score 4 · Answer 2 · answered Jan 15 '19 at 19:28

4

Do the console log in ngOnInit of this.sort

Angular didn't catch MatSort component as on init phase NgIf didn't process the template.

Change ngOnInit to ngAfterViewInit and it will work as expected.

answered Jan 15 '19 at 19:28

Danil Gudz

2,233
16
16

score 1 · Answer 3 · answered Jan 16 '19 at 13:23

Thanks Danil, your suggestion worked, but only when the *ngIf evaluated to true when the view of initialized.

The solution I am now using is:

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

This was based on information from: Angular 2 @ViewChild in *ngIf

Full working solution at: https://stackblitz.com/edit/angular-quzvjv-jzdbb6

KrishOnline · Answer 4 · 2019-09-11T01:52:09.037

In Angular 8, We can easily achieve multiple/single material table sorting and paging inside *ngIf. In the below example I am using "ng-template" in order to show/hide the table using *ngIf else.

My Sample *ngIf format

   <div *ngIf="!isDataLoadedFromApi; else loadTransactions">No data to display</div>

Below tables are in the same form

Table-1

<ng-template #loadCases>
<table mat-table [dataSource]="snowDataSource" #snowSort="matSort" matSort class="mat-elevation-z3 snow-table">
    <mat-paginator class="mat-elevation-z3" #snowPaginator [pageSizeOptions]="[3, 10, 20]" showFirstLastButtons>
    </mat-paginator></ng-template>

Table-2

<ng-template #loadTransactions>
<table mat-table [dataSource]="transactionDataSource" #transactionSort="matSort" matSort
    class="mat-elevation-z3 transaction-table">
    <mat-paginator class="mat-elevation-z3" #transactionPaginator [pageSizeOptions]="[3, 10, 20]"
        showFirstLastButtons>
    </mat-paginator></ng-template>

Check the "#transactionSort="matSort" and #transactionPaginator in Table-2. Also "#snowSort="matSort" and #snowPaginator in Table-1

In the TS file configure view child and other settings like below. That's it.

@ViewChild('snowSort', { static: false }) set matSnowSort(snowSort: MatSort) {
this.snowSort = snowSort;
if (this.snowDataSource !== null && this.snowDataSource !== undefined) {
    this.snowDataSource.sort = this.snowSort;
}}

@ViewChild('snowPaginator', { static: false }) set matSnowPaginator(snowPaginator: MatPaginator) {
this.snowPaginator = snowPaginator;
if (this.snowDataSource !== null && this.snowDataSource !== undefined) {
    this.snowDataSource.paginator = this.snowPaginator;
}}

@ViewChild('transactionSort', { static: false }) set matTransactionSort(transactionSort: MatSort) {
this.transactionSort = transactionSort;
if (this.transactionDataSource !== null && this.transactionDataSource !== undefined) {
    this.transactionDataSource.sort = this.transactionSort;
}}

@ViewChild('transactionPaginator', { static: false }) set matTransactionPaginator(transactionPaginator: MatPaginator) {
this.transactionPaginator = transactionPaginator;
if (this.transactionDataSource !== null && this.transactionDataSource !== undefined) {
    this.transactionDataSource.paginator = this.transactionPaginator;
}}

private transactionSort: MatSort;
private transactionPaginator: MatPaginator;
private snowSort: MatSort;
private snowPaginator: MatPaginator;
payIdTransactions: TLItem[];
snowCases: Cases[];
transactionDataSource: MatTableDataSource<TLItem>;
snowDataSource: MatTableDataSource<Cases>;

private getTransactions(startDate: string, endDate: string) {
    this.payIdTransactions = results.getTransactionsResponse.TLItems.TLItem;
    this.transactionDataSource = new MatTableDataSource(this.payIdTransactions);
}
private getSnowCases(startDate: string, endDate: string) {
    this.snowCases = results.getCasesResponse.cases;
    this.snowDataSource = new MatTableDataSource(this.snowCases);
}

Angular Material Table Sorting - Data Doesn't sort when inside a *ngIf condition

4 Answers4

Linked