Can't bind to 'dataSource' since it isn't a known property of 'table' in angular 19

<table id="tableId" [dataSource]="dataSource" matSort matSortActive="id" matSortDirect="asc"
class="table table-striped table-bordered table-sm ">
@for (col of displayedColumns; track col) {
<ng-container matColumnDef="{{col}}">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ getCapitalizeFirstLetter(col) }}</th>
<td mat-cell *matCellDef="let element;">
@if (col != 'Action') {
<label>{{getElement(element,col)}}</label>
} @else {
@if (isView) {
<button class="btn btn-success btn-small" (click)="onView(element)">View</button>
}
@if (isEdit) {
<button class="btn btn-primary btn-small" (click)="onEdit(element)">Edit</button>
}
@if (isDelete) {
<button class="btn btn-danger btn-small" (click)="onDelete(element)">Delete</button>
}
}
</td>
</ng-container>
}

<tr mat-header-row class="mat-head" *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns" style="background-color: #ffffff">
padding: 0; margin: 0; max-height: 10px;">
</tr>
<tr mat-row *matNoDataRow>
<td class="mat-cell" colspan="4">
No data matching the filter "{{ input}}"
</td>
</tr>
</table>
<mat-paginator #paginator [pageSizeOptions]="pageSizeOption || [10, 25, 100,1000]" aria-label="Select page of users"
(page)="nextPageEvent($event)" [length]="length"></mat-paginator>


the above code is a html component code and the below code is declaration of the dataSource in the component.ts file of the code repo.

@Input() dataSource: MatTableDataSource<any> = new MatTableDataSource();


i am getting issue in angular 19 for declaring property like this, as in the earlier versions of angular there was no such issue but currently i am getting this issue in angular v19.

Any help will be admirable. Thank you.

Continue reading...