Issue
I am trying to use the mat table in my angular 15 <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
in the correct location at the bottom, and displayedColumns is working for other table portions I get this error
Cannot read properties of undefined (reading 'template')
at MatFooterRowDef.extractCellTemplate (table.mjs:415:38)
at table.mjs:1904:27
What other things do I need to add/remove/import when using this? I have imported MatTableModule
Tired of the Angular Mat documentation just being legitimately wrong and unexplanatory.
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>
<!-- LaneLot Column -->
<ng-container matColumnDef="style">
<th mat-header-cell *matHeaderCellDef>Style</th>
<td mat-cell *matCellDef="let sale">{{ sale.lane }}/{{ sale.lot }}</td>
</ng-container>
<!-- VIN Column -->
<ng-container matColumnDef="eng">
<th mat-header-cell *matHeaderCellDef>Eng</th>
<td mat-cell *matCellDef="let sale">
{{ sale.eng }}
</td>
</ng-container>
<!-- VIN Column -->
<ng-container matColumnDef="trans">
<th mat-header-cell *matHeaderCellDef>Trans</th>
<td mat-cell *matCellDef="let sale">
{{ sale.eng }}
</td>
</ng-container>
<!-- VIN Column -->
<ng-container matColumnDef="miles">
<th mat-header-cell *matHeaderCellDef>Miles</th>
<td mat-cell *matCellDef="let sale">
{{ sale.eng }}
</td>
</ng-container>
<!-- VIN Column -->
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef>Price</th>
<td mat-cell *matCellDef="let sale">
{{ sale.eng }}
</td>
</ng-container>
<!-- VIN Column -->
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let sale">
{{ sale.date | date }}
</td>
</ng-container>
<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>
it works if i take away the mat-footer-row, as soon as i add that its busted
Solution
All the cells specified in the *matFooterRowDef
must have *matFooterCellDef
present inside matColumnDef
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let sale">
{{ sale.date | date }}
</td>
<td mat-footer-cell *matFooterCellDef>100</td> <!-- must be present if you have the property in matFooterRowDef array! -->
</ng-container>
code
import { CommonModule } from '@angular/common';
import { Component, SimpleChanges } from '@angular/core';
import { MatTableModule, MatTableDataSource } from '@angular/material/table';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
@Component({
selector: 'app-root',
standalone: true,
template: `
<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>
<td mat-footer-cell *matFooterCellDef>100</td>
</ng-container>
<!-- LaneLot Column -->
<ng-container matColumnDef="style">
<th mat-header-cell *matHeaderCellDef>Style</th>
<td mat-cell *matCellDef="let sale">{{ sale.lane }}/{{ sale.lot }}</td>
<td mat-footer-cell *matFooterCellDef>100</td>
</ng-container>
<!-- VIN Column -->
<ng-container matColumnDef="eng">
<th mat-header-cell *matHeaderCellDef>Eng</th>
<td mat-cell *matCellDef="let sale">
{{ sale.eng }}
</td>
<td mat-footer-cell *matFooterCellDef>100</td>
</ng-container>
<!-- VIN Column -->
<ng-container matColumnDef="trans">
<th mat-header-cell *matHeaderCellDef>Trans</th>
<td mat-cell *matCellDef="let sale">
{{ sale.eng }}
</td>
<td mat-footer-cell *matFooterCellDef>100</td>
</ng-container>
<!-- VIN Column -->
<ng-container matColumnDef="miles">
<th mat-header-cell *matHeaderCellDef>Miles</th>
<td mat-cell *matCellDef="let sale">
{{ sale.eng }}
</td>
<td mat-footer-cell *matFooterCellDef>100</td>
</ng-container>
<!-- VIN Column -->
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef>Price</th>
<td mat-cell *matCellDef="let sale">
{{ sale.eng }}
</td>
<td mat-footer-cell *matFooterCellDef>100</td>
</ng-container>
<!-- VIN Column -->
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let sale">
{{ sale.date | date }}
</td>
<td mat-footer-cell *matFooterCellDef>100</td>
</ng-container>
<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>
`,
imports: [CommonModule, MatTableModule],
})
export class App {
sales?: any[] = [
{
model: 'test',
style: 'test',
eng: 'test',
trans: 'test',
miles: 'test',
price: 'test',
date: 'test',
},
]; //New Interface for Sale
//Sort these in descending Date (table cannot be sorted)
dataSource = new MatTableDataSource<any[]>();
displayedColumns: string[] = [
'model',
'style',
'eng',
'trans',
'miles',
'price',
'date',
];
ngOnChanges(changes: SimpleChanges) {
const vehicleList = changes['sales'].currentValue;
this.dataSource = vehicleList;
}
}
bootstrapApplication(App);
Answered By - Naren Murali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.