Angular Material Table: Property 'displayedColumns' does not exist on type 'ContentComponent'

Question

Problem statement

I have an Angular material table which I want to display data, but it breaks on these lines:

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

And says:

Property 'displayedColumns' does not exist on type 'ContentComponent'.

---

Code

HTML

<mat-table [dataSource]="students">

    <ng-container>
        <mat-header-cell *matHeaderCellDef>First name</mat-header-cell>
        <mat-cell *matCellDef="let student"> {{student.firstName}} </mat-cell>
    </ng-container>

    <ng-container>
        <mat-header-cell *matHeaderCellDef>Last name</mat-header-cell>
        <mat-cell *matCellDef="let student"> {{student.lastName}} </mat-cell>
    </ng-container>

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

---

TS file

import { Component, OnInit, Input } from '@angular/core';
import { Student } from '../Models/Student';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  @Input() students: Student[] = [
    {
      firstName: 'Codo',
      lastName: 'Pal',
      studentId: 1,
      campus: 'XYZ',
      grade: {
        average: 100,
        percent: 100,
        letter: 'A+'
      }
    },
    {
      firstName: 'Jonny',
      lastName: 'BeGood',
      studentId: 2,
      campus: 'XYZ',
      grade: {
        average: 80,
        percent: 80,
        letter: 'B'
      }
    },
    {
      firstName: 'Jonny',
      lastName: 'Cash',
      studentId: 3,
      campus: 'XYZ',
      grade: {
        average: 20,
        percent: 20,
        letter: 'F-'
      }
    }
  ];
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { ContentComponent } from './content/content.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    ContentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

What I've tried

• https://blog.angular-university.io/angular-material-data-table/

• https://github.com/angular/components/issues/11427

• unknown properties of angular 6 <table mat-table> (I had my table declared before as <table> instead of <mat-table>)

• As mentioned in the third bullet, I changed my table (and all sub-elements to angular material directives), but it didn't work.

Answer 1

You should name your columns and make displayedColumns field an array of columns you want to show

<ng-container matColumnDef="firstName"> <!-- <---- here on the left is a name - "firstName" -->
    <mat-header-cell *matHeaderCellDef>First name</mat-header-cell>
    <mat-cell *matCellDef="let student"> {{student.firstName}} </mat-cell>
</ng-container>

export class ContentComponent implements OnInit {
  displayedColumns = ['firstName']; // here we say that we want to just display 1 column - firstName