Getting error: Can't bind to 'dataSource' since it isn't a known property of 'table'

Question

I am trying to create a dialog box with a table inside of it. I already created it but then I was told to use mat-table instead of creating a table from scratch and ever since that, I have been stuck with this particular error. I'll share my code to make it more convenient. These are the files I have.

asm-prop.interface.ts

export interface Properties {
    name: string;
    value: number;
}

asm-prop.component.ts

import { Component, ViewChild } from '@angular/core';
import { ContextMenuComponent } from 'ngx-contextmenu';
import { MatDialogRef } from '@angular/material/dialog';
import { AssemblyFetchService } from 'src/app/assembly/assembly-fetch.service';
import { Properties } from './asm-prop.interface';

@Component({
    selector: 'asm-prop',
    templateUrl: 'asm-prop.component.html',
    styleUrls: ['asm-prop.component.scss'],
    providers: []
})
export class AsmPropComponent {

    @ViewChild(ContextMenuComponent) public customContextMenu: ContextMenuComponent;

    asmProps = null;
    displayedColumns: string[] = ['Property Name', 'Value'];
    storedProperties: Properties[];

    public constructor(public asmPropDialogRef: MatDialogRef<AsmPropComponent>, public asmFetchServ: AssemblyFetchService) {

        this.storedProperties = [
            { name: 'Number of Assemblies:', value: this.asmFetchServ.propertiesDialogComponentStatistics.propertiesDialogComponentStatistics.assembly_statistics.num_assemblies },
            { name: 'Number of Assembly Instances:', value: this.asmFetchServ.propertiesDialogComponentStatistics.assembly_statistics.num_assembly_instances },
            { name: 'Number of Part Instances:', value: this.asmFetchServ.propertiesDialogComponentStatistics.assembly_statistics.num_assembly_instances },
            { name: 'Number of Parts:', value: this.asmFetchServ.propertiesDialogComponentStatistics.assembly_statistics.num_parts },
            { name: 'Number of Contact Instances', value: this.asmFetchServ.propertiesDialogComponentStatistics.assembly_statistics.num_contacts },
            { name: 'Number of Contacts:', value: this.asmFetchServ.propertiesDialogComponentStatistics.assembly_statistics.num_contacts },
            { name: 'Nesting Level:', value: this.asmFetchServ.propertiesDialogComponentStatistics.assembly_statistics.nesting_level },
        ];
    }

    closeDialog(): void {
        this.asmPropDialogRef.close();
    }
}

asm-prop.component.html

<h1 mat-dialog-title> Properties of {{asmFetchServ.propertiesDialogComponentName}}</h1>
<div>
    <table mat-table #table [dataSource]="storedProperties" class="mat-elevation-z8">
        <!-- Position Column -->
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Property Name </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="value">
            <th mat-header-cell *matHeaderCellDef> Value </th>
            <td mat-cell *matCellDef="let element"> {{element.value}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef=" displayedColumns">
        </tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <div mat-dialog-actions>
        <button mat-button (click)="closeDialog()">Close</button>
    </div>

For all of your information, I have already included MatTableModule in app.module.ts. What is the correct way to go about it?