I am trying to display the footer element in my row Datatable only when I am in a specific column. I usually know how to do this in normal cases, but here I am using programming row def (which I need for grouping).
This is the code I have tried:
Template:
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns; let i = index" matColumnDef="{{ column.field }}">
<mat-header-cell *matHeaderCellDef (click)="SortWith($event,column)">{{ column.field }}
</mat-header-cell>
<mat-cell *matCellDef="let row">
<div >
{{ row[column.field] }}
</div>
</mat-cell>
<mat-footer-cell *matFooterCellDef *ngIf="column.field == Category"> <b><font color=red>Total: </font></b></mat-footer-cell> // I need to dispaly this just in column of category
</ng-container>
<mat-header-row mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" [className]="row.RemainingQuantities == 0 ? 'red' : 'redBack'"></mat-row>
<mat-row *matFooterRowDef="displayedColumns; sticky: true"></mat-row>
<!-- Group header -->
<ng-container matColumnDef="groupHeader">
<mat-cell colspan="999" *matCellDef="let group">
<mat-icon *ngIf="group.expanded">expand_less</mat-icon>
<mat-icon *ngIf="!group.expanded">expand_more</mat-icon>
<strong>{{groupByColumns[group.level-1]}} = {{group[groupByColumns[group.level-1]]}} ({{group.totalCounts}})</strong>
</mat-cell>
</ng-container>
My component.ts:
this.columns = [{
field: 'Category'
}, {
field: 'Model'
}, {
field: 'Reference'
}, {
field: 'Name'
}, {
field: 'RemainingQuantities'
}, {
field: 'Department.Name'
}, {
field: 'Supplier.Name'
}];
this.displayedColumns = this.columns.map(column => column.field);
this.groupByColumns = ['Category'];
columnsToDisplay: string[] = ['Category', 'Model', 'Reference', 'Name', 'RemainingQuantities', 'Department.Name', 'Supplier.Name'];
SortedColumns: string[] = [];
this.service.get_product().subscribe((result : any)=>{
this.listdata = result;
this.decompersed = decrypt(result);
console.log(this.decompersed);
this.ProductList = this.decompersed;
this.dataSource.data = this.addGroups(this.ProductList, this.groupByColumns);
this.dataSource.filterPredicate = this.customFilterPredicate.bind(this);
this.dataSource.filter = performance.now().toString();
However, I encountered an error:
Uncaught Error: Template parse errors: Can't have multiple template bindings on one element. Use only one attribute prefixed with * (" ]*ngIf="column.field == Category"> Total: "):
When I remove the NgIf, I get this result:
https://i.sstatic.net/L1aAg.png
I only need the first total label