Can t bind to dataSource since it isn t a known property of table

Question

I am new in angular 5 development  I am trying to develop a data table with angular material using the example provided here   https   material angular io components table examples    I am getting an error saying Can t bind to  dataSource  since it isn t a known property of  table      Please help

User · Answer

In my case the trouble was I didn t put the components that contain the datasource in the declarations of main module  NgModule     imports        EnterpriseConfigurationsRoutingModule      SharedModule        declarations        LegalCompanyTypeAssignComponent      LegalCompanyTypeAssignItemComponent      ProductsOfferedListComponent      ProductsOfferedItemComponent      CustomerCashWithdrawalRangeListComponent      CustomerCashWithdrawalRangeItemComponent      CustomerInitialAmountRangeListComponent      CustomerInitialAmountRangeItemComponent      CustomerAgeRangeListComponent      CustomerAgeRangeItemComponent      CustomerAccountCreditRangeListComponent     lt --This component contains the dataSource     CustomerAccountCreditRangeItemComponent            The component contains the dataSource  export class CustomerAccountCreditRangeListComponent implements OnInit      ViewChild MatPaginator  set paginator paginator  MatPaginator       this dataSource paginator   paginator         ViewChild MatSort  set sort sort  MatSort       this dataSource sort   sort         dataSource   new MatTableDataSource       lt --The dataSource used in HTML   loading  any    resultsLength  any    displayedColumns  string       quot id quot    quot desde quot    quot hasta quot    quot tipoClienteNombre quot    quot eliminar quot      data  any     constructor      private crud  CustomerAccountCreditRangeService      public snackBar  MatSnackBar      public dialog  MatDialog      private ui  UIComponentsService            This is for Angular 9

User · Answer

I was also breaking my head for a long time with this error message and later I identified that I was using  datasource  instead of  dataSource

User · Answer

Please see your dataSource varibale doesn t get the data from the server or dataSource is not assigned to the expected format of data

User · Answer

if your  import   MatTableModule   from   angular material    is on a shared module  make sure you export it   sharedmodule ts   import   MatTableModule   from   angular material     NgModule     imports                   MatTableModule                   exports   MatTableModule        then on your custom module where you define the component that use material table   custommodule ts    NgModule   imports    sharedmodule

User · Answer

Thanx to  Jota Toledo  I got the solution for my table creation  Please find the working code below   component html   lt mat-table  table  dataSource   dataSource  matSort gt     lt ng-container matColumnDef    column id     ngFor  let column of columnNames  gt       lt mat-header-cell  matHeaderCellDef mat-sort-header gt    column value   lt  mat-header-cell gt       lt mat-cell  matCellDef  let element  gt    element column id    lt  mat-cell gt     lt  ng-container gt      lt mat-header-row  matHeaderRowDef  displayedColumns  gt  lt  mat-header-row gt     lt mat-row  matRowDef  let row  columns  displayedColumns   gt  lt  mat-row gt   lt  mat-table gt    component ts  import   Component  OnInit  ViewChild   from   angular core   import   MatTableDataSource  MatSort   from   angular material   import   DataSource   from   angular cdk table     Component     selector   app-m     templateUrl     m component html     styleUrls      m component css       export class MComponent implements OnInit      dataSource    displayedColumns          ViewChild MatSort  sort  MatSort              Pre-defined columns list for user table         columnNames          id   position       value   No                id   name       value   Name                    id   weight         value   Weight                      id   symbol         value   Symbol              ngOnInit         this displayedColumns   this columnNames map x   gt  x id       this createTable           createTable         let tableArr  Element        position  1  name   Hydrogen   weight  1 0079  symbol   H             position  2  name   Helium   weight  4 0026  symbol   He             position  3  name   Lithium   weight  6 941  symbol   Li             position  4  name   Beryllium   weight  9 0122  symbol   Be             position  5  name   Boron   weight  10 811  symbol   B             position  6  name   Carbon   weight  12 0107  symbol   C                this dataSource   new MatTableDataSource tableArr       this dataSource sort   this sort         export interface Element     position  number    name  string    weight  number    symbol  string      app module ts  imports      MatSortModule    MatTableModule

User · Answer

If you ve tried everything mentioned here and it didn t work  make sure you also have added angular material to your project  If not  just run the following command in the terminal to add it  ng add  angular material  After it successfully gets added  wait for the project to get refreshed  and the error will be automatically gone

User · Answer

Remember to import the MatTableModule module and remove the table element show below for reference  wrong implementation  lt table mat-table  dataSource     myDataArray    gt         lt  table gt  correct implementation   lt mat-table  dataSource   myDataArray  gt   lt  mat-table gt

User · Answer

Angular Core v6 0 2   Angular Material  v6 0 2   Angular CLI v6 0 0  globally v6 1 2    I had this issue when running ng test  so to fix it  I added to my xyz component spec ts file   import   MatTableModule   from   angular material    And added it to imports section in TestBed configureTestingModule       beforeEach async      gt        TestBed configureTestingModule         imports    ReactiveFormsModule  HttpClientModule  RouterTestingModule  MatTableModule          declarations    BookComponent          schemas    CUSTOM ELEMENTS SCHEMA               compileComponents

User · Answer

The problem is your angular material version  I have the same  and I have resolved this when I have installed the good version of angular material in local   Hope it solve yours too

User · Answer

For Angular 7  Check where is your table component located   In my case it was located like app shared tablecomponent where shared folder contains all sub components But I was importing material module in Ngmodules of  app module ts which was incorrect   In this case Material module should be imported in Ngmodules of shared module ts  And it works    There is NO NEED to change  table  to  mat-table  in angular 7   Angular7 - Can  39 t bind to   39 dataSource  39  since it isn  39 t a known property of   39 mat-table  39

User · Answer

Material example is using the wrong table tags  Change   lt table mat-table gt  lt  table gt   lt th mat-header-cell gt  lt  th gt   lt td mat-cell gt  lt  td gt    lt tr mat-header-row gt  lt  tr gt   lt tr mat-row gt  lt  tr gt    to   lt mat-table gt  lt  mat-table gt   lt mat-header-cell gt  lt  mat-header-cell gt   lt mat-cell gt  lt  mat-cell gt    lt mat-header-row gt  lt   lt mat-header-row gt   lt mat-row gt  lt   lt mat-row gt

User · Answer

Remember to add MatTableModule in your app module s imports i e   In Angular 9   import   MatTableModule   from   angular material table      NgModule     imports                   MatTableModule                     Less than Angular 9  import   MatTableModule   from   angular material      NgModule     imports                   MatTableModule

[angular] Can't bind to 'dataSource' since it isn't a known property of 'table'

Examples related to angular

Examples related to datatable

Examples related to angular-material