CODEWITHSUNDEEP
angularhtml-tableangular-materialangular-material-table
Diego
Diego

Reputation: 2360

Angular 12 Material table 'mat-row' is not a known element:

I am using Angular 12 and "@angular/material": "^12.2.9",

My module.ts is like this

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

import { ConnectorCommonRoutingModule } from './connector-common-routing.module';
import { NotificationsComponent } from './components/notification/notification.component';
import {MatTableModule,MatTableDataSource,} from '@angular/material/table';
@NgModule({
  declarations: [
    NotificationsComponent
  ],
  imports: [
    MatTableDataSource,
    MatTableModule,
    CommonModule,
    ConnectorCommonRoutingModule

  ]
})
export class ConnectorCommonModule { }

In my .html I have this table like this

<mat-table [dataSource]="dataSource" class="full-width-table">

    <ng-container matColumnDef="Active">
      <mat-header-cell *matHeaderCellDef>Active</mat-header-cell>
      <mat-cell *matCellDef="let not">{{not.Active}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="NotificationName">
      <mat-header-cell *matHeaderCellDef>Notification Name</mat-header-cell>
      <mat-cell *matCellDef="let not">{{not.NotificationName}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="ProcessorName">
      <mat-header-cell *matHeaderCellDef>Processor Name</mat-header-cell>
      <mat-cell *matCellDef="let not">{{not.ProcessorName}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="ChannelAndLevel">
      <mat-header-cell *matHeaderCellDef>Channel & Level</mat-header-cell>
      <mat-cell *matCellDef="let not">{{not.ChannelAndLevel}}</mat-cell>
    </ng-container>


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

  </mat-table>

When i run ng serve got this error...

If 'mat-row' is an Angular component, then verify that it is part of this module.

I have read to import this

import { AngularMaterialModule } from './../angular-material/angular-material.module';

but this does not exists..

What reference i am missing to import?

Thanks

Upvotes: 1

Views: 2768

Answers (1)

abdella
abdella

Reputation: 734

MatTableDataSource is angular material class see doc.. You cann't import it in the import array because it is not a module. Remove it from the imports array.

If you want to use it, simply import and use it like other classes in your component ts files as:

import {MatTableDataSource} from '@angular/material';

this.dataSource = new MatTableDataSource(data);

see stackblitz example

Upvotes: 2

Related Questions