CODEWITHSUNDEEP
angularangular-materialangular-material-table
Thomas Jahncke
Thomas Jahncke

Reputation: 141

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

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

Upvotes: 0

Views: 7821

Answers (4)

KrishOnline
KrishOnline

Reputation: 516

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);
}

Upvotes: 1

Shawn Pan
Shawn Pan

Reputation: 101

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

Upvotes: 8

Thomas Jahncke
Thomas Jahncke

Reputation: 141

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

Upvotes: 1

Danylo Gudz
Danylo Gudz

Reputation: 2656

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.

Upvotes: 4

Related Questions