Mat Table Not Sorting After View Change

Question

I have an ngIf that changes the view on click on the products screen. The starting view is the data in a mat table, but once you click the add product button and [cancel / add product / edit product] go back to the table view, it no longer sorts.

I've tried adding the view child to see if I can renderrows after an add, but no dice.

CODE: https://stackblitz.com/edit/angular-wez8lh

(Please excuse the horrendous CSS)

Is there a way to get it to sort again after [add / edit / cancel] without putting the form in another path or always showing it?

I managed all this by using ngrx-data for simplify all ngrx store-effect-entity and use a dialog for add-edit product, I can pass some simple code but you need to know ngrx for understand it — Lean Pilar

Ala Abid Ala Abid · Accepted Answer · 2019-05-03T20:56:08

HERE IS A WORKING STACKBLITZ
The problem you have is the *ngIf in the mat-table selector. If you check this.sort you'll see it's undefined. This works :

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

  }
}

Mat Table Not Sorting After View Change

1 Answers