How to use matRowDefColumns?

I'am trying to use <mat-table> from Material2 in my users.component.html where I try to list users (retrieved by a http call) in a table.

Here my simple output which is working fine and I would like to display with/in <mat-table>:

<ul *ngFor="let item of userData">
    <li><strong>{{item._id}}</strong></li>
    <li>{{item.email}}</li>
    <li>{{item.fullName}}</li>
    <br><br>
</ul>

But when I first add the HTML Markup for the table, I immediately get the following error:

Property binding matRowDefColumns not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".

users.component.html

<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">

  <!-- Position Column -->
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.id}} </mat-cell>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="email">
    <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.email}} </mat-cell>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.fullName}} </mat-cell>
  </ng-container>

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

To make sure I'am providing the necessary information here, here is my user.component.ts

import { Component, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions, Request, RequestMethod } from '@angular/http';
import { LoginService, UserService, SwitchTabService } from '../../_service';
import { CdkTableModule } from '@angular/cdk/table';
import { DataSource } from '@angular/cdk/table';

@Component({
    selector: 'app-users',
    templateUrl: './users.component.html',
    styleUrls: ['./users.component.css']
})

export class UsersComponent implements OnInit {

    constructor(private loginService:LoginService, public http: Http) {}

    errorMessage:any;
    userData: {};

    ngOnInit() {
        this.retrieveUsers() ;
    }

    retrieveUsers() {
        this.loginService.getUsersList()
        .subscribe(
            (res) => {
                this.userData = res.message;
            },(err) => {
                this.errorMessage = err;
            }
        )
    }
}

I have checked on the angular/material2 and here too How to use material2 data table but to be honest, I couldn't figure out what I still have to fix from my side as it looks to me a kind of error which is due to an import, export or declaration. Any idea please?