Angular Material mat-table with the error > [Can't bind to 'dataSource' since it isn't a known property of 'table'.]

Question

I'm trying to assemble a simple table using angular stuff using array declared in ts file. But the moment I see the [dataSource]="myArray" apparently it wasn't identified as a databind. I believe I imported the component in the correct module.

If someone helps i will be grateful.

Below are my codes.

module.ts >>

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material';

import { AppMaterialModule } from '../shared/app-material/app-material.module';
import { CoursesRoutingModule } from './courses-routing.module';
import { CoursesComponent } from './courses/courses.component';


@NgModule({
  declarations: [
    CoursesComponent
  ],
  imports: [
    CommonModule,
    CoursesRoutingModule,
    AppMaterialModule,
    MatTableModule
  ]
})
export class CoursesModule { }

component.ts >>

import { Course } from '../model/course';
import { Component, OnInit } from '@angular/core';

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

  courses: Course[] = [
    {_id: '1', name: 'Angular', category:'Front-End'}
  ];
  displayedColumns = ['name', 'category'];

  constructor() {

   }

  ngOnInit(): void {
  }

}

component.html >>

<table mat-table [dataSource]="courses" class="mat-elevation-z8">


  <!-- Position Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Curso </th>
    <td mat-cell *matCellDef="let element"> {{ element.name }} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="category">
    <th mat-header-cell *matHeaderCellDef> Categoria </th>
    <td mat-cell *matCellDef="let element"> {{ element.category }} </td>
  </ng-container>

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

interface >>

export interface Course {
  _id: string;
  name: string;
  category: string;
}

I tried to identify the error by changing the import to the main module. And also researching other modules of angular material but without success

Answer 1

Try to add this line in your ts:

courses = new MatTableDataSource([]);