Tengo un proyecto de administración de ngx en angular y quiero incluir un componente de material en una de las páginas.

Intenté instalar material usando "ng add @angular/material", lo que da un error.

Entonces incluí @import "~@angular/material/prebuild-themes/indigo-pink.css"; en estilos.css

Este es mi código html que quiero integrar en una de las páginas de material angular. El proyecto no presenta errores, pero cada vez que lo ejecuto, la página no se abre. No se muestra el html y todo entra en algún tipo de error.

 <button mat-button (click)="openDialog('Add',{})" mat-flat-button color="primary">Add Row</button> <table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8"> <!--- Note that these columns can be defined in any order. The actual rendered columns are set as a property on the row definition" --> <!-- Id Column --> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef> ID. </th> <td mat-cell *matCellDef="let element"> {{element.id}} </td> </ng-container> <!-- Name Column --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <!-- Action Column --> <ng-container matColumnDef="action"> <th mat-header-cell *matHeaderCellDef> Action </th> <td mat-cell *matCellDef="let element" class="action-link"> <a (click)="openDialog('Update',element)">Edit</a> | <a (click)="openDialog('Delete',element)">Delete</a> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> </div>```