Cannot read property 'template' of undefined at MatHeaderRowDef.extractCellTemplate

Question

I am making a table using angular-material in HTML, I am getting the error Cannot read property 'template' of undefined at MatHeaderRowDef.extractCellTemplate

ts file contains

export class BankListComponent implements OnInit{

    dataSource = new BankDataSource(this.bankService);

    displayedColumns = ['ifsc', 'bank_id', 'branch', 'address', 'city', 'district', 'state', 'bank_name']

    constructor(private bankService: BankService){}

    ngOnInit(){

    }

}


export class BankDataSource extends DataSource<any>{

    constructor(private bankService: BankService){
        super();
    }

    connect(): Observable<Bank[]> {
        return this.bankService.getData();
    }

    disconnect() {}

}

And in HTML

<ng-container matColumnDef="bank_name">
    <mat-header-cell #matHeaderCellDef>Bank Name</mat-header-cell>
    <mat-cell *matCelDef="let bank">{{bank.bank_name}}</mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

need a nice looking table and getting the following error.

BankListComponent.html:2 ERROR TypeError: Cannot read property 'template' of undefined at MatHeaderRowDef.extractCellTemplate -

---

Answer 1

A little late, but this was the top result for myself when searching for the same issue. I had a spelling mistake. I had written *matHeaderCallDef it should be Cell not Call.

The question here shows *matCelDef, it is missing an l - so should be *matCellDef

Answer 2

It is a typo, For me I wrote

matHeaderCellDef

matHHeaderCellDef