In my Angular 15 project, I am attempting to correctly position and utilize the mat table with the following code snippet:
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>Cannot read properties of undefined (reading 'template')
at MatFooterRowDef.extractCellTemplate (table.mjs:415:38)
at table.mjs:1904:27
What additional steps do I need to take in terms of adding, removing, or importing components when using this feature? Currently, I have already imported MatTableModule.
Frustrated with the lack of clarity and accuracy in the Angular Material documentation.
Files: TS
@Component({
selector: 'saa-prior-sales',
templateUrl: './prior-sales.component.html',
styleUrls: ['./prior-sales.component.css'],
standalone: true,
imports: [CommonModule, CurrencyPipe, MatTableModule],
})
export class PriorSalesComponent implements OnChanges {
@Input() sales?: IVehicleDetails[]; //New Interface for Sale
//Sort these in descending Date (table cannot be sorted)
dataSource = new MatTableDataSource<IVehicleDetails[]>();
displayedColumns: string[] = [
'model',
'style',
'eng',
'trans',
'miles',
'price',
'date',
];
ngOnChanges(changes: SimpleChanges) {
const vehicleList = changes['sales'].currentValue;
this.dataSource = vehicleList;
}
}
HTML
<div
*ngIf="dataSource"
class="w-full p-6 mt-0 bg-white border border-gray-200 rounded-lg shadow md:mb-4 sm:mb-4 ng-star-inserted saa-green">
<div class="p-2 mb-4 text-xl font-medium saa-blue">Prior Sales</div>
<table mat-table [dataSource]="dataSource">
<!-- Location -->
<ng-container matColumnDef="model">
<th mat-header-cell *matHeaderCellDef>Model</th>
<td mat-cell *matCellDef="let sale">
{{ sale.vehicle?.location }}
</td>
</ng-container>
<!-- Remaining Code Stays Unchanged -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>
</div>
The issue disappears when I remove the mat-footer-row element, but I want it to work as intended without causing any malfunctions.