Can't bind to 'dataSource' since it isn't a known property of 'table' even when modules are imported

Question

I am implementing a mat-table ui. In my app.module I imported my material.module like so:

import { MaterialModule } from './material-design/material.module';
imports: [
    MaterialModule,
  ],

In my component that implements this, I have this code:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';

displayedColumns: string[] = ['PlateNumber', 'Purpose', 'Schedule', 'Select'];
dataSource: MatTableDataSource<ScheduledVehicleModel>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

getScheduledVhicles() {
    this.vs.getScheduledVhicles()
        .subscribe((data: any) => {
            this.dataSource = new MatTableDataSource(data);
            this.dataSource.paginator = this.paginator;
            this.dataSource.sort = this.sort;
        },
        err => {
            this.ts.error('Error in retrieving scheduled vehilces.');
        }
    );
}

In my html I get this error:

This is in my material.module

Can you please help me correct this. I might be missing something. Thank you very much.

This is the whole material.module

import { NgModule } from "@angular/core";
import { CommonModule } from '@angular/common';
import { 
    MatButtonModule,
      MatToolbarModule,
      MatInputModule,
      MatProgressSpinnerModule,
      MatCardModule,
      MatCheckboxModule,
      MatTabsModule,
      MatSidenavModule,
      MatIconModule,
      MatGridListModule,
      MatFormFieldModule,
      MatSelectModule,
      MatSnackBarModule,
      MatExpansionModule,
      MatDividerModule,
      MatMenuModule,
      MatDialogModule,
      MatPaginatorModule,
      MatSortModule,
      MatTableModule,
      MatPaginator,
      MatSort,
      MatTable,
      MatAutocompleteModule,
      MatDatepickerModule,
      MatNativeDateModule,
      MatRadioModule,
      MatProgressBarModule,
      MatListModule
 } from '@angular/material';

@NgModule({
    imports: 
    [
        MatButtonModule,
        MatToolbarModule,
        MatInputModule,
        MatProgressSpinnerModule,
        MatCardModule,
        MatSidenavModule,
        MatCheckboxModule,
        MatTabsModule,
        MatIconModule,
        MatGridListModule,
        MatFormFieldModule,
        MatSelectModule,
        MatSnackBarModule,
        MatExpansionModule,
        MatDividerModule,
        MatMenuModule,
        MatDialogModule,
        MatPaginatorModule,
        MatSortModule,
        MatTableModule,
        MatAutocompleteModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatRadioModule,
        MatProgressBarModule,
        MatListModule
    ],
    exports: 
    [
        MatButtonModule,
        MatToolbarModule,
        MatInputModule,
        MatProgressSpinnerModule,
        MatCardModule,
        MatSidenavModule,
        MatCheckboxModule,
        MatTabsModule,
        MatIconModule,
        MatGridListModule,
        MatFormFieldModule,
        MatSelectModule,
        MatSnackBarModule,
        MatExpansionModule,
        MatDividerModule,
        MatMenuModule,
        MatDialogModule,
        MatPaginatorModule,
        MatSortModule,
        MatTableModule,
        MatAutocompleteModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatRadioModule,
        MatProgressBarModule,
        MatListModule
    ]
})
export class MaterialModule {}

This is the whole error:

Uncaught Error: Template parse errors:
Can't bind to 'dataSource' since it isn't a known property of 'table'. ("

        <div class="mat-elevation-z8">
          <table mat-table [ERROR ->][dataSource]="dataSource" matSort>

            <!-- ID Column -->
"): ng:///AppModule/SecurityComponent.html@7:27
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24661)
    at JitCompiler._parseTemplate (compiler.js:34601)
    at JitCompiler._compileTemplate (compiler.js:34576)
    at eval (compiler.js:34477)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34477)
    at eval (compiler.js:34347)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34346)
syntaxError @ compiler.js:485
TemplateParser.parse @ compiler.js:24661
JitCompiler._parseTemplate @ compiler.js:34601
JitCompiler._compileTemplate @ compiler.js:34576
(anonymous) @ compiler.js:34477
JitCompiler._compileComponents @ compiler.js:34477
(anonymous) @ compiler.js:34347
then @ compiler.js:474
JitCompiler._compileModuleAndComponents @ compiler.js:34346
JitCompiler.compileModuleAsync @ compiler.js:34240
CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:239
PlatformRef.bootstrapModule @ core.js:5551
(anonymous) @ main.ts:13
../../../../../src/main.ts @ main.bundle.js:527
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:549
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1

This is the whole app.module

import { VehicleService } from './starter/services/vehicle.service';
import { GeneralparametersService } from './starter/services/generalparameters.service';
import { AdminModule } from './admin/admin.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

// COMPONENTS
import { AppComponent } from './app.component';
import { StarterComponent } from './starter/starter.component';
import { StarterHeaderComponent } from './starter/starter-header/starter-header.component';
import { StarterLeftSideComponent } from './starter/starter-left-side/starter-left-side.component';
import { StarterContentComponent } from './starter/starter-content/starter-content.component';
import { StarterFooterComponent } from './starter/starter-footer/starter-footer.component';
import { StarterControlSidebarComponent } from './starter/starter-control-sidebar/starter-control-sidebar.component';
import { LoginComponent } from './starter/pages/login/login.component';

// ROUTES
import { applicationRoutes } from './starter/routes/routes';

// ANGULAR MATERIAL
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material-design/material.module';

// PAGES
import { CameraComponent } from './starter/pages/camera/camera.component';

// TOASTER
import { ToastrModule } from 'ngx-toastr';

// DIALOGS
import { ConfirmComponent } from './dialogs/confirm/confirm.component';

// SERVICES
import { UserService } from './starter/services/user.service';

// GUARDS
import { AuthGuard } from './authorization/auth.guard';
import { AuthInterceptor } from './authorization/auth.interceptor';
import { SecurityComponent } from './starter/pages/security/security.component';
@NgModule({
  declarations: [
    AppComponent,
    StarterComponent,
    StarterHeaderComponent,
    StarterLeftSideComponent,
    StarterContentComponent,
    StarterFooterComponent,
    StarterControlSidebarComponent,
    CameraComponent,
    ConfirmComponent,
    LoginComponent,
    SecurityComponent,
  ],
  imports: [
    BrowserModule,
    AdminModule,
    BrowserAnimationsModule,
    MaterialModule,
    RouterModule.forRoot(applicationRoutes),
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
    HttpClientModule
  ],
  providers: [
    UserService,
    GeneralparametersService,
    VehicleService,
    AuthGuard,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ],
  entryComponents: [
    ConfirmComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

This the whole component

import { ToastrService } from 'ngx-toastr';
import { VehicleService } from './../../services/vehicle.service';
import { ScheduledVehicleModel } from '../../models/vehicle.model';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';

@Component({
  selector: 'app-security',
  templateUrl: './security.component.html',
  styleUrls: ['./security.component.css']
})
export class SecurityComponent implements OnInit {
  // scheduledVehicles: ScheduledVehicleModel[];

  // TABLE
  displayedColumns: string[] = ['PlateNumber', 'Purpose', 'Schedule', 'Select'];
  dataSource: any;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(
    private vs: VehicleService,
    private ts: ToastrService
  ) { }

  ngOnInit() {
    this.getScheduledVhicles();
  }

  getScheduledVhicles() {
    this.vs.getScheduledVhicles()
      .subscribe((data: any) => {
        this.dataSource = new MatTableDataSource(data);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
      err => {
        this.ts.error('Error in retrieving scheduled vehilces.');
      }
    );
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

}

Answer 1

Change your

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

to

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

Check this:https://github.com/angular/material2/issues/7845

Answer 2

The selector you are using i.e. table is from Angular v6. It looks like that you have Angular v5 installed. In that case, have a look at this V5 Mat-Table Example. You need to use it like this:

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

Answer 3

<table> should be <mat-table>

<mat-table [dataSource]='dataSource' matSort>
  ...
</mat-table>