How do I connect my md-table (cdk data-table) to a service to be used as the data source?

Question

Sorry but I\'m in the dark with this one.

I have a method that returns an array of objects and I use that array of objects to display a table. this is the function

Answer 1

You can't define let row and then do data binding to {{competition.compName}}. You need to switch the declaration to let competition OR do the data binding with row.

Either:

<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.compName}} </cdk-cell>

Or:

<cdk-cell *cdkCellDef="let competition" class="example-cell"> {{competition.compName}} </cdk-cell>

Also, you can do the data retrieval and connect() by extending DataSource class only. Here's a Plunker example of simplified version of your table.