Angular mat-table showing errors

Question

I'm quite new to Angular develpment and I'm trying to display a table. To do that I'm following this tutorial which is quite easy to understand: https://codingthesmartway.com/angular-material-part-4-data-table/.

However, I keep getting this error:

These are my component's files:

Item Class to be rendered in the Table:

export class Service{
    id: string;
    name: string;
    description: string;
    installedVersion: string;
    state: ServiceState;
    lastestVersion: string;    
}

Components TS:

import { Component, Input, OnInit } from '@angular/core';
import { Observable, of, BehaviorSubject } from 'rxjs';
import { CdkTableModule, DataSource } from '@angular/cdk/table';
import { Service } from '../../models/service';
import { MatTableDataSource } from '@angular/material';


@Component({
  selector: 'app-services-table',
  templateUrl: './services-table.component.html',
  styleUrls: ['./services-table.component.scss']
})
export class ServicesTableComponent implements OnInit {

  @Input() services: Service[];
  dataSource;
  displayedColumns = ['name', 'state', 'currentVersion', 'lastestVersion'];
  constructor() { }

  ngOnInit() {    
    this.dataSource = new ServiceDataSource(this.services);
  }

}

export class ServiceDataSource implements DataSource<any> {

  constructor(private services: Service[]) {    
  }

  connect(): Observable<Service[]> {
    return of(this.services);
  }

  disconnect() {
  }
}

HTML:

<div>
    <mat-table #table [dataSource]="dataSource">
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>Service Name</th>
          <td mat-cell *matCellDef="let service">{{service.name}}</td>
        </ng-container>
        <ng-container matColumnDef="state">
          <th mat-header-cell *matHeaderCellDef>Service State</th>
          <td mat-cell *matCellDef="let service">{{service.state}}</td>
        </ng-container>
        <ng-container matColumnDef="currentVersion">
            <th mat-header-cell *matHeaderCellDef>Installed Version</th>
            <td mat-cell *matCellDef="let service">{{service.installedVersion}}</td>
        </ng-container>
          <ng-container matColumnDef="lastestVersion">
              <th mat-header-cell *matHeaderCellDef>Lastest Version</th>
              <td mat-cell *matCellDef="let service">{{service.lastestVersion}}</td>
          </ng-container>
          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

          <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>
</div>

Have been facing this issue for almost a day and cannot solve it. Any help will be truly appretiated.