Angular Material Mat-Table Custom Module

Question

Angular-Version: 13.0.4

I have an web-app with several modules. My basic goal is to use the mat-table library for several modules. I successfully implemented it in the app.component, but if I use it an other module it won´t work.

This is the output when using the mat-table selectors in the team-overview component.

Error: src/modules/teams-overview/team-overview/team-overview.component.html:9:1 - 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.

What I already tried:

• schemas: [ CUSTOM_ELEMENTS_SCHEMA ] on both modules

• using table tag and the angular-material directives instead of the direct selectors

Working Example:

app.component.html

<mat-table style="width: auto" class="mat-elevation-z8" [dataSource]="lessons">

  <ng-container matColumnDef="seqNo">

    <mat-header-cell *matHeaderCellDef>#</mat-header-cell>
    <mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</mat-cell>

  </ng-container>

  <ng-container matColumnDef="description">

    <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
    <mat-cell *matCellDef="let lesson">{{lesson.description}}</mat-cell>

  </ng-container>

  <ng-container matColumnDef="duration">

    <mat-header-cell *matHeaderCellDef>Duration</mat-header-cell>
    <mat-cell *matCellDef="let lesson">{{lesson.duration}}</mat-cell>

  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

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

</mat-table>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'frontend';

  lessons= [{
    'id': 120,
    'description' : 'Introduction to Angular Material',
    'duration': '4:17',
    'seqNo': 1,
    'courseId': 11
  },
    {
      'id': 105,
      'description' : 'Introduction to Material',
      'duration': '4:50',
      'seqNo': 2,
      'courseId': 1
    }]

  displayedColumns = ['seqNo', 'description', 'duration']
}

app.module.ts

import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
import {HttpInterceptorService} from "../modules/shared/http-interceptor.service";
import {LoginModule} from "../modules/login/login.module";
import {SharedModule} from "../modules/shared/shared.module";
import {RoutingModule} from "../modules/routing/routing.module";
import {HeaderModule} from "../modules/header/header.module";
import {MatTableModule} from "@angular/material/table";



@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    LoginModule,
    SharedModule,
    RoutingModule,
    HeaderModule,
    MatTableModule,
  ],
  providers: [{provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi:true}],
  bootstrap: [AppComponent],

})
export class AppModule { }

Code to Improve

team-overview.component.ts

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-team-overview',
  templateUrl: './team-overview.component.html',
  styleUrls: ['./team-overview.component.css'],
})
export class TeamOverviewComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }


  lessons= [{
    'id': 120,
    'description' : 'Introduction to Angular Material',
    'duration': '4:17',
    'seqNo': 1,
    'courseId': 11
  },
    {
      'id': 105,
      'description' : 'Introduction to Material',
      'duration': '4:50',
      'seqNo': 2,
      'courseId': 1
    }]

  displayedColumns = ['seqNo', 'description', 'duration']

}

team-overview.component.html

<div class="container-fluid">
  <div class="row justify-content-end mt-3 mx-3">
    <button type="button" class="btn btn-dark button-width-md bg-standard-color me-3 button-width-md-middle mt-2">+ Team</button>
  </div>

</div>


<mat-table style="width: auto" class="mat-elevation-z8" [dataSource]="lessons">

  <ng-container matColumnDef="seqNo">

    <mat-header-cell *matHeaderCellDef>#</mat-header-cell>
    <mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</mat-cell>

  </ng-container>

  <ng-container matColumnDef="description">

    <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
    <mat-cell *matCellDef="let lesson">{{lesson.description}}</mat-cell>

  </ng-container>

  <ng-container matColumnDef="duration">

    <mat-header-cell *matHeaderCellDef>Duration</mat-header-cell>
    <mat-cell *matCellDef="let lesson">{{lesson.duration}}</mat-cell>

  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

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

</mat-table>

team-overview.module.ts

import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { TeamOverviewComponent } from './team-overview/team-overview.component';
import {MatTableModule} from "@angular/material/table";


@NgModule({
  declarations: [
    TeamOverviewComponent
  ],
  imports: [
    CommonModule,
    MatTableModule
  ],
})
export class TeamOverviewModule { }

Answer 1

I forgot to import my feature model team-overview in the app.module

Case closed