Currently, I am implementing an angular material table with sorting functionality. You can view the example here: Table Sorting Example
I intend to transform this into a reusable component so that in the parent component, all I have to do is pass the columns and dataSource like this:
<app-reports-mat-table [columns]="columns" [dataSource]="dataSource"></app-reports-mat-table>However, when I try passing the dataSource to the child component, it shows up as undefined. Here's an image illustrating the issue: https://i.stack.imgur.com/WQ4K1.png
If I check if the dataSource is set before rendering the child component like this:
<app-reports-mat-table *ngIf="dataSource" [columns]="columns" [dataSource]="dataSource"></app-reports-mat-table>I would appreciate any guidance on correctly passing the dataSource to the child component or how to effectively convert this into a reusable component. Thank you for your help!
Parent Template
<app-reports-mat-table [columns]="columns" [dataSource]="dataSource"></app-reports-mat-table>Parent TypeScript
// Relevant TypeScript code for the parent component goes here...Child Template
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)" class="mat-elevation-z8">
// Child component template content here...
</table>Child TypeScript
// Code for the child component related to data binding and initialization...