How to solve undefined' is not assignable to type 'CdkTableDataSourceInput' error and why did it occur?

Question

Angular

Good day!
Angular Material has been implemented in the project.
In the component template, I am trying to display the table in tasks (the table markup is taken from https://material.angular.io/components/table/overview ).
In the component I do: dataSource?: MatTableDataSource An
error occurs: Type 'MatTableDataSource | undefined' is not assignable to type 'CdkTableDataSourceInput'

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

Tell me what I'm doing wrong? In what direction to move?

Attempts:

dataSource: MatTableDataSource<Task> = new MatTableDataSource([])

public dataSource?: MatTableDataSource<Task> = new MatTableDataSource<Task>([]);

There is no error on stackblitz - https://angular-ivy-mlo5qg.stackblitz.io

Answer 1

Everything is written in the error: the type of MatTableDataSource does not match the type of CdkTableDataSourceInput. Apparently you are trying to pass a field of the MatTableDataSource type to the component, this is your dataSource, and it expects a parameter of the CdkTableDataSourceInput type.