Property 'sort' has no initializer and is not definitely assigned in the constructor

Question

I am trying to use MatSort Module to sort my Table in Angular Material but I get this error:

Property 'sort' has no initializer and is not definitely assigned in the constructor.

This is my ts file:

import { Component, OnInit, ViewChild } from '@angular/core';
import { Personal } from 'src/app/models/personal.model';
import { PersonalService } from 'src/app/services/personal.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator'; 
import { MatSort, MatSortModule, MatSortHeader } from '@angular/material/sort'

@Component({
  selector: 'app-personal-list',
  templateUrl: './personal-list.component.html',
  styleUrls: ['./personal-list.component.css']
})

export class PersonalListComponent implements OnInit {
  personals?: Personal[];
  currentPersonal?: Personal;
  currentIndex = -1;
  name = '';

  PERSONAL_DATA : Personal[] = []
  displayedColumns: string[] = ['name', 'action'];
  dataSource = new MatTableDataSource<Personal>(this.PERSONAL_DATA);
  
  @ViewChild(MatSort) sort: MatSort;

  constructor(private personalService: PersonalService) { }

  ngOnInit(): void {
    this.getAllPersonalTable();
  }

  private getAllPersonalTable(){
    let resp = this.personalService.getAllPersonal();
    resp.subscribe(report =>this.dataSource.data=report as Personal[]);
    this.dataSource.sort = this.sort;
  }

}

The error occurs in this line

@ViewChild(MatSort) sort: MatSort;

And yes, I have tried sort!. This removes the error, but fails to compile my page. Same goes for "strictPropertyInitialization": false,in tsconfig.json file.

Any help on how to solve is much appreciated!!!

Should not you import modules MatSortModule, MatPaginatorModule in app.module? — Sanjay Choudhary, Jun 14 '21 at 15:09
@SanjayChoudhary I have a personal.module.ts file, in which I import all Modules, which I also import in the app.module.ts file — schuhesindbequemer, Jun 14 '21 at 15:10
then why do you have these modules in app.component file?you should check all properties in tsconfig that says strict. — Sanjay Choudhary, Jun 14 '21 at 15:13
@SanjayChoudhary because I have to import the module.ts file in the app.module.ts file. It's basically shared modules - also, I think you are confusing app.component and app.module file — schuhesindbequemer, Jun 14 '21 at 15:14
Does this answer your question? [Property '...' has no initializer and is not definitely assigned in the constructor](https://stackoverflow.com/questions/49699067/property-has-no-initializer-and-is-not-definitely-assigned-in-the-construc) — BuZZ-dEE, Dec 22 '21 at 09:35

amof · Answer 1 · 2021-06-22T08:09:12.407

12

The problem I faced was exactly the same as you. It is because Angular 12 enables stricts mode in typescript (reference here).

Try with:

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

edited Jun 22 '21 at 08:09

answered Jun 21 '21 at 18:34

amof

139
5

1

! solved my problem, does it mean nullable ? – MindRoasterMir Dec 02 '21 at 12:13
banged my head for an hour on this. Your solution works! Sending love from across the internets... +1 – James Fleming Apr 17 '22 at 15:58
@MindRoasterMir https://stackoverflow.com/questions/42273853/in-typescript-what-is-the-exclamation-mark-bang-operator-when-dereferenci It explains the shebang behind the sort variable. – Martijn van der Bruggen May 30 '22 at 11:09

score 4 · Answer 2 · answered Jan 06 '22 at 09:20

4

If you are using latest version of Angular, use

 @ViewChild(MatSort) sort = new MatSort();

Basically it's typescript compiler error.

In the new versions, typescript has introduced strick class Initialization.

In Angular 12 or higher you may face this issue.

answered Jan 06 '22 at 09:20

Arun

205
2
4

I think this is the better answer. I came here because my table wasn't sorting. Both Amof's and Arun's solutions worked for me but from a logic perspective i think this is the better answer. Since the error clearly mentions 'no initializer'. The answer supplies an initializer while Amof's answer tells Angular the variable can not be null and should be ignored. – Martijn van der Bruggen May 30 '22 at 11:14

score 1 · Answer 3 · answered Nov 14 '22 at 17:37

1

If you are using angular 13, you must add ! at the end of your variable

  @ViewChildren("orderArrow") orderArrow!: QueryList<any>

that do the trick

answered Nov 14 '22 at 17:37

Felipe Castillo

536
8
25

Property 'sort' has no initializer and is not definitely assigned in the constructor

3 Answers3