MatSort is undefined - Angular 5

Question

I'm trying to implement a Material table in my angular application. Pagination and Filter are working fine, but i'm not able to sort my table. My reference to MatSort is undefined.

I did import it in AppModule:

import {MatTableModule} from '@angular/material/table';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatButtonModule, MatCheckboxModule,MatPaginatorModule,MatInputModule} from '@angular/material';
import {MatSortModule} from '@angular/material/sort';

...
@NgModule({
  declarations: [...],
  imports: [   
     MatSortModule,
     MatTableModule,
     MatPaginatorModule,
     MatInputModule,
     ...
   ]
  })

Here is my component.ts:

import { Component, OnInit , ViewChild, AfterViewInit} from '@angular/core';
...
import {MatTableDataSource,MatSort,MatPaginator} from '@angular/material';
...
export class MyClass inplements OnInit, AfterViewInit{
  @ViewChild(MatSort) sort:MatSort;
  @ViewChild(MatPaginator) paginator:MatPaginator;
  ...
  ngAfterViewInit(){
     this.dataSource = new MatTableDataSource(this.fake_data);
     this.dataSource.paginator = this.paginator
     this.dataSource.sort = this.sort
  }
 ...
}

And here is my component HTML:

<mat-form-field *ngIf="ready" class="width-80">
   <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<mat-table #table class = "mat-elevation-z8 animate" matSort [dataSource]="dataSource" display:flex>
   <ng-container matColumnDef="fake_name">
       <mat-header-cell *matHeaderCellDef mat-sort-header class="columnTitle"><b>{{fake_label.name}}</b></mat-header-cell>
       <mat-cell *matCellDef="let fake;" class="cellContent">{{fake.name}}</mat-cell>
   </ng-container>
   <mat-header-row *matHeaderRowDef="fakeColumns"></mat-header-row>
   <mat-row *matRowDef="let row; columns: fakeColumns" class="animate"></mat-row>
</mat-table>
<mat-paginator [length]="length" [pageSize]="5" [pageSizeOptions]="[5,10,15,20,25,50,100]" showFirstLastButtons></mat-paginator>

Does anyone know what I'm doing wrong?

instead of declaring this.dataSource.sort = this.sort; in ngAfterViewInit() try to call it in ngOnInit() — yer
– yer, Commented Jun 6, 2018 at 13:54
I did, it keeps undefined, i tryied ngOnInit, ngAfterViewInit and an external function. none of them worked — Lucas Gaspar
– Lucas Gaspar, Commented Jun 6, 2018 at 13:56

Siva Karuppiah · Accepted Answer · 2020-03-04 11:05:20Z

20

Issue can be fixed adding in apps.module.ts:

import { MatPaginatorModule,MatSortModule } from '@angular/material';

and:

imports: [
    ....
    MatPaginatorModule,        
    MatSortModule

Hope this helps.

edited Mar 4, 2020 at 11:05

Siva Karuppiah

1,0131 gold badge9 silver badges19 bronze badges

answered Sep 13, 2018 at 11:19

Philippe Corrèges

7132 gold badges12 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Victor Reyes · Accepted Answer · 2019-06-15 03:17:13Z

11

I had the same problem and I've found an answer on a Angular's issue.

In my particular case (and that guy's case on github), it was solved removing the *ngIf on the mat-table tag. I'm not sure but maybe that <mat-form-field *ngIf="ready" class="width-80"> is causing some trouble.

answered Jun 15, 2019 at 3:17

Victor Reyes

4126 silver badges12 bronze badges

2 Comments

Brian Over a year ago

Using Angular 14 and Material 14, and this is still the case. Removed the *ngIf and sorting works again.

Varun Savaliya Dec 31, 2024 at 19:09

Yes, this is also the case with my issue. I am working with angular 17.

cottontail · Accepted Answer · 2022-09-07 06:34:14Z

5

With Angular 8 and Material 6.4.1 if you waiting to receive a data from a service the simplest and best way to fix it just set the static: false instead of true, like this:

@ViewChild(MatSort, { **static: false** }) sort: MatSort;

In my case is an ngOnChanges call for data.

FYI: same for MatPaginator.

edited Sep 7, 2022 at 6:34

cottontail

25.6k25 gold badges184 silver badges176 bronze badges

answered Jan 21, 2020 at 10:24

George Cs.

3295 silver badges4 bronze badges

Comments

Jeremy Caney · Accepted Answer · 2020-06-15 22:43:00Z

1

The issue is because of *ngIf="ready". If we are setting this to ready from parent component, then place datasource.sort on ngOnChanges as this is the first life-cycle hook that gets called:

ngOnChanges(){ this.datasource.sort = sort; this.datasource.paginator = paginator; }

Alternatively, if you are changing ready in same component, place datasource.sort before you are setting ready false:

ngOnInit(){ this.datasource.sort = sort; this.datasource.paginator = paginator; this.ready=false; }

And, finally, initialize your datasource with some default value so this.datasource will not be null or undefined.

datasource=new MatTableDataSource([]);

edited Jun 15, 2020 at 22:43

Jeremy Caney

7,818115 gold badges58 silver badges86 bronze badges

answered Jun 15, 2020 at 21:49

karthik pirati

111 bronze badge

Comments

DIVYANSHU TIWARI · Accepted Answer · 2022-02-06 12:15:30Z

0

For me, I was using two MatTables and for the second one, I was doing pagination and sorting. By mistake I wrote matSort for the first table also. So, in component file, it was searching for sort and paginator of first table and I was defining it for second table.

answered Feb 6, 2022 at 12:15

DIVYANSHU TIWARI

11 silver badge

Comments

cottontail · Accepted Answer · 2022-09-07 06:34:53Z

0

My solution was:

mat-sort-header="FIELDNAME"

as my columns contain "transformed" data.

edited Sep 7, 2022 at 6:34

cottontail

25.6k25 gold badges184 silver badges176 bronze badges

answered Oct 18, 2019 at 19:37

bvamos

7707 silver badges10 bronze badges

Collectives™ on Stack Overflow

MatSort is undefined - Angular 5

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related