Clash Royale CLAN TAG#URR8PPP

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

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();






mat-table

table

3 Answers
3

Change your

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


to

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


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

<table> should be <mat-table>

<table>

<mat-table>

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


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:

table

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.