Angular material table could not find column with id 'categoryName'

December 16, 2022

I am using Angular material for the first time and I am trying to bind these properties to the columns but apparently always the first column that is assigned in the header’s string array would throw an error saying that it could not find a column with id ‘x’ for whatever ‘x’ is the first element in the array..
here is the component’s code

import { Component, OnInit } from '@angular/core';
import { Product } from '../Models/product.model';
import { ProductDataService } from '../Services/product-data.service';
import { Response } from '../Models/response.model';
import { MatTableDataSource } from '@angular/material/table';
import {ProductViewModel } from '../Models/product-view-model.model'
@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  
  
  dataSource :MatTableDataSource<ProductViewModel>=new MatTableDataSource<ProductViewModel>();
  displayColumns:string[]=[];
  products:ProductViewModel[] =[];
  constructor(public productService:ProductDataService ) {


   }


  ngOnInit(): void {
    this.displayColumns=
    [ 
      'categoryName',
      'enabled',
      'id',
      'name',
      'price',
      'quantity'
    ]//Object.getOwnPropertyNames(new ProductViewModel())

    
   this.productService.getProducts().subscribe((d:Response )=>{
    
    this.products =   (d.data as Product[])
                      .map((p:Product)=>  ({
                      'id' : p.id,
                      'categoryName':p.category.name,
                      'enabled':p.enabled,
                      'price':p.price,
                      'quantity':p.quantity,
                      'name':p.name
                    } as ProductViewModel) );

    this.dataSource = new MatTableDataSource<ProductViewModel>(this.products);

   })

  }

}

the html content

<table mat-table #table [dataSource]="dataSource">
    <ng-container matColDef="categoryName">
        <th mat-header-cell *matHeaderCellDef> categoryName </th>
        <td mat-cell *matCellDef="let element"> {{element.categoryName}} </td>
    </ng-container>
    <ng-container matColDef="enabled">
        <th mat-header-cell *matHeaderCellDef> enabled </th>
        <td mat-cell *matCellDef="let element"> {{element.enabled}} </td>
    </ng-container>
    <ng-container matColDef="id">
        <th mat-header-cell *matHeaderCellDef> id </th>
        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>
    <ng-container matColDef="price">
        <th mat-header-cell *matHeaderCellDef> price </th>
        <td mat-cell *matCellDef="let element"> {{element.price}} </td>
    </ng-container>
    <ng-container matColDef="name">
        <th mat-header-cell *matHeaderCellDef> name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
    <ng-container matColDef="quantity">
        <th mat-header-cell *matHeaderCellDef> quantity </th>
        <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayColumns"></mat-row>

</table>

>Solution :

Each column must be defined with directive matColumnDef by Material Table manual

<ng-container matColumnDef="categoryName">
    <th mat-header-cell *matHeaderCellDef> categoryName </th>
    <td mat-cell *matCellDef="let element"> {{element.categoryName}} </td>
</ng-container>