I'm currently facing an obstacle while trying to pass a column from a parent component to a child component in Angular. The issue arises when attempting to sort the column. Below is the code snippet:
Parent component
<table-sorting-example matSort>
<ng-container matColumnDef="another">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Another</th>
<td mat-cell *matCellDef="let element">{{element.another}}</td>
</ng-container>
</table-sorting-example>
Child component
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Position</th>
<td mat-cell *matCellDef="let element">{{element.position}}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let element">{{element.name}}</td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Weight</th>
<td mat-cell *matCellDef="let element">{{element.weight}}</td>
</ng-container>
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Symbol</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>
Child Component TS file
import {
AfterViewInit,
Component,
ContentChildren,
QueryList,
ViewChild,
} from '@angular/core';
import { MatSort, Sort } from '@angular/material/sort';
import {
MatColumnDef,
MatTable,
MatTableDataSource,
} from '@angular/material/table';
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
another: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B', another: 'A' },
{ position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', another: 'B' },
{ position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', another: 'C' },
{ position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', another: 'D' },
{ position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', another: 'E' },
{ position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', another: 'F' },
];
/**
* @title Table with sorting
*/
@Component({
selector: 'table-sorting-example',
styleUrls: ['table-sorting-example.css'],
templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample implements AfterViewInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatTable) myTable: MatTable<PeriodicElement>;
@ViewChild(MatSort) sort: MatSort;
@ContentChildren(MatColumnDef) private customCols: QueryList<MatColumnDef>;
constructor() {}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
for (let col of this.customCols) {
this.myTable.addColumnDef(col);
this.displayedColumns.push(col.name);
}
}
}
Sorting works as expected on columns except for the "another" column. I have explored the documentation and other resources to no avail. Any insights on why the sorting isn't functioning on the "another" column and how I could resolve it would be greatly appreciated.
You can access the complete code on stackblitz