Estoy intentando agregar una tabla en mi aplicación Angular desde Angular Material@17.2.1 (como se muestra aquí ).

Copié/pegué el código de la documentación oficial de Angular Material pero sigo recibiendo el error:

No se puede vincular a 'dataSource' ya que no es una propiedad conocida de 'tabla'

Intenté lo siguiente:

Reemplazar la etiqueta de la tabla con mat-table, lo que resulta en

mat-table no es un elemento conocido

Eliminar los corchetes en [dataSource]="dataSource"as dataSource="dataSource", lo que da como resultado (esta vez un error en la consola del desarrollador web, esta podría ser la solución, pero no sé cómo solucionarlo incluso después de algunas búsquedas)

No se puede vincular a 'matHeaderRowDef' ya que no es una propiedad conocida de 'tr' (utilizada en la plantilla del componente '_UsersComponent').

importando MatTableModuledesde '@angular/material'en lugar de '@angular/material/table'en app.module.ts, lo que resulta en

@angular/material no tiene ningún miembro exportado MatTableModule

Agréguelo import {CdkTableModule} from '@angular/cdk/table';e importelo, sin cambiar nada.

El MatTableModulese declara e importa en app.module.ts, donde UsersComponenttambién se declara e importa su uso.

Aquí están todas las versiones utilizadas en el proyecto:

@ angular-devkit/arquitecto 0.1702.2

@angular-devkit/build-angular 17.2.2

@angular-devkit/núcleo 17.2.2

@angular-devkit/esquemas 17.2.2

@angular/cdk 17.2.1

@angular/cli 17.2.2

@angular/material 17.2.1

@esquemas/angular 17.2.2

rxjs 7.8.1

mecanografiado 5.3.3

zona.js 0.14.4

Aquí está app.module.tsel contenido de mi archivo:

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';

import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';

import { AppComponent } from './app.component';
import { TopbarComponent } from './topbar/topbar.component';
import { LeftmenuComponent } from './leftmenu/leftmenu.component';
import { NavleftbarComponent } from './navleftbar/navleftbar.component';

import { MatIconModule } from '@angular/material/icon';
import {MatTableModule} from '@angular/material/table';
import { MatButtonModule } from '@angular/material/button';
import {CdkTableModule} from '@angular/cdk/table';

import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { UsersComponent } from './users/users.component';

@NgModule({
  declarations: [
    AppComponent,
    TopbarComponent,
    LeftmenuComponent,
    NavleftbarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatButtonModule,
    MatIconModule,
    MatTableModule,
    UsersComponent,
    CdkTableModule
  ],
  providers: [
    provideAnimationsAsync()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Aquí está el users.component.tscontenido del archivo:

import { Component } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

export interface UserElement {
  firstname: string;
  lastName: string;
  email: string;
  microsoftEmail: string;
  class: string;
}

const ELEMENT_DATA: UserElement[] = [{
  firstname: "Pierrick",
  lastName: "MARTELLIERE",
  email: "p.martelliere@gmail.com",
  microsoftEmail: "pierrick@coxidev.com",
  class: "GPME24"
}];

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrl: './users.component.css',
  standalone: true,
})

export class UsersComponent {
  displayedColumns: string[] = ['firstName', 'lastName', 'email', 'microsoftEmail', 'class'];
  dataSource = ELEMENT_DATA;
  clickedRows = new Set<UserElement>();
}

Y los usuarios.component.html:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
  <ng-container matColumnDef="firstName">
    <th mat-header-cell *matHeaderCellDef> Prénom </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <ng-container matColumnDef="lastName">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef> Email </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <ng-container matColumnDef="microsoftEmail">
    <th mat-header-cell *matHeaderCellDef> Compte Microsoft </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <ng-container matColumnDef="class">
    <th mat-header-cell *matHeaderCellDef> Classe </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

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



<!-- Copyright 2024 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at https://angular.io/license -->

Realmente no veo lo que me estoy perdiendo, un poco de ayuda sería bienvenida.