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

[Alaeddine2]

I'm trying to use Data Table from angular material, but when I execute the code I found that an error display.

ERROR in src/app/dashboard/dashboard.component.html:98:13 - error NG8001: 'mat-table' is not a known element: 1. If 'mat-table' is an Angular component, then verify that it is part of this module. 2. If 'mat-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

98 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/dashboard/dashboard.component.ts:14:16 14 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component DashboardComponent. src/app/dashboard/dashboard.component.html:98:25 - error NG8002: Can't bind to 'dataSource' since it isn't a known property of 'mat-table'. 1. If 'mat-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
2. If 'mat-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

98 ~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/dashboard/dashboard.component.ts:14:16 14 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component DashboardComponent.

I've tried to change app.module and import everything necessary but still the same.

app.module:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { BlankTemplateComponent } from "./template/blank-template.component";
import { LeftNavTemplateComponent } from "./template/left-nav-template.component";
import { AppRoutingModule, routes } from "./app.routing";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";
import { HeaderComponent } from "./shared/header/header.component";
import { NavigationComponent } from "./shared/navigation/navigation.component";
import { CollectionService } from './collection.service';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTableDataSource} from '@angular/material/table';
import { MatTableModule } from '@angular/material/table';
@NgModule({
  declarations: [
    AppComponent,
    BlankTemplateComponent,
    PageNotFoundComponent,
    HeaderComponent,
    LeftNavTemplateComponent,
    NavigationComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MatTableModule,

    RouterModule.forRoot(routes, { useHash: true }),
    BrowserAnimationsModule
  ],
  providers: [CollectionService],
  bootstrap: [AppComponent]
})
export class AppModule {} 

component:

import { Component, OnInit } from '@angular/core';
import {  Router } from '@angular/router';
import { MatTableDataSource } from '@angular/material/table';
import { CollectionService } from '../collection.service';
import { Collection_info } from '../modules/Collection_info';
import { User_info } from '../modules/User_info';
import { formatDate } from '@angular/common';
import { Observable } from 'rxjs/Observable'
import { DataSource } from '@angular/cdk/collections'
import {MatTableModule} from '@angular/material/table';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  Collection_info: Collection_info[];
  User_info: User_info[];

  dataSource = new User_infoDataSource(this.CollectionService);
  dispalyedColumns = ['Agent','cin','email','age','role'];
  constructor(private CollectionService: CollectionService, private router: Router) { }
User_info: User_info


  ngOnInit() {

    var index = 0;
    var bn_agent = document.getElementById("nb_total_agents");
    this.CollectionService.getagentsnb().subscribe((e)=>{
      console.log(e);
      bn_agent.textContent = e.toString();
    });
   /* this.CollectionService.getallCollections().subscribe((col)=>{
      console.log(col);
    });*/
    this.CollectionService.getCollections_email("mansor@gmail.com").subscribe((col=>{
      console.log(col);
    }));
    this.CollectionService.get1allCollections().subscribe(col=>{
      console.log(col); 
    });
    this.get_nbcol_vente();

  }

  get_nbcol_vente(){
    var Counter_Collections = 0,Counter_ventes = 0;
    var bn_col = document.getElementById("nb_total_col");
    var bn_vente = document.getElementById("nb_vente");
    var date = formatDate(new Date(), 'yyyy-MM-dd', 'en');
    var date1 =  new Date(date);;
    console.log('date: ' + date1);


    this.CollectionService.getallCollections().subscribe((data: Collection_info[])=>{
      this.Collection_info = data;
      console.log('data requested...');
      console.log(this.Collection_info);
      for(var i =0; i<this.Collection_info.length;i++){
        console.log(this.Collection_info[i].type);
        console.log(this.Collection_info[i].date_creation_col);

       // var date2 =  new Date(this.Collection_info[i].date_creation_col);;
        //console.log((date1.getTime() - date1.getTime()) / 1000 / 60 / 60 / 24);
        if(this.Collection_info[i].type==='collection'){
          Counter_Collections++;
        }else{
          Counter_ventes++;
        } 
      }
      console.log('col: ' + Counter_Collections);
      console.log('vente: ' + Counter_ventes);
      bn_col.textContent = Counter_Collections.toString();
      bn_vente.textContent = Counter_ventes.toString();
    });
  }


}
export class User_infoDataSource extends DataSource<any>{
  constructor(private CollectionService: CollectionService){
  super();}
  connect(): Observable<User_info[]>{
    return this.CollectionService.getUsers();
  }
  disconnect(){}
}

html file:

<div>
            <mat-table  [dataSource]="dataSource">
                <ng-container matColumnDef = "Agent">
                    <mat-header-cell *matHeaderCellDef> agent </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.Fname}} </mat-cell>

                </ng-container>
                <ng-container matColumnDef = "cin">
                    <mat-header-cell *matHeaderCellDef> CIN </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.CIN}} </mat-cell>

                </ng-container>
                    <ng-container matColumnDef = "email">
                    <mat-header-cell *matHeaderCellDef> E_mail </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.email}} </mat-cell>

                </ng-container>
                <ng-container matColumnDef = "age">
                    <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.age}} </mat-cell>

                </ng-container>
                <ng-container matColumnDef = "role">
                    <mat-header-cell *matHeaderCellDef> Role </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.Role}} </mat-cell>

                </ng-container>
                <mat-header-row *matHeaderRowDef="dispalyedColumns"></mat-header-row>
                <mat-row *matRowDef="let row; columns: dispalyedColumns"></mat-row>
            </mat-table>
        </div>

[andrewseguin]

Which module declares DashboardComponent? Try adding MatTableModule into that module's imports. It's likely that the table's module is not being included since you are using routes

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}