Angular material2 not working

Question

i've got a problem with angular'table. This is my html page with the table:

<div class="content">
    <div class="row">
        <div class="col-6 col-md-4 col-xl-2">
            <button class="mat-raised-button" [routerLink]="['add']">Aggiungi</button>
        </div>
    </div>
    <mat-card>
        <mat-card-content>
            <table mat-table #table matSort [dataSource]="dataSource">

                <!--- Note that these columns can be defined in any order.
                      The actual rendered columns are set as a property on the row definition" -->

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

                <!-- Name Column -->
                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Nome</th>
                </ng-container>

                <!-- Weight Column -->
                <ng-container matColumnDef="weight">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Capo</th>
                </ng-container>

                <!-- Symbol Column -->
                <ng-container matColumnDef="symbol">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Indirizzo</th>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            </table>
        </mat-card-content>
    </mat-card>
</div>

and this is the component:

import {Component} from '@angular/core';
import {Company} from "../../../core/Model/Company";
import {CompanyAPIsService} from "../../../core/API/CompanyAPIs.service";
import {DataSource} from '@angular/cdk/collections';
import {MatTableDataSource} from "@angular/material";

@Component({
    selector: 'admin-index-company',
    templateUrl: 'app/admin/company/index/admin-indexCompany.component.html',
})
export class AdminIndexCompanyComponent {

    /**
     * Empty array of type Company[]
     * @type {Company[]}
     */
    companies: Company[] = [];

    /**
     * Table column'names
     * @type {string[]}
     */
    displayedColumns = ['position', 'name', 'weight', 'symbol'];

    dataSource: MatTableDataSource<Company>;

    constructor(private companyService: CompanyAPIsService) {
        companyService.getAllCompanies().then((company: Company[])=>{
            this.companies = company;
            this.dataSource = new MatTableDataSource<Company>(this.companies);
            console.log(this.dataSource);
            console.log(this.companies);
        })
    }
}

It doesn't work because nothing get's displayed and i really don't know why. Also an error appears in the html pages where is the matCellDef, show me 'of expected'. It seems strange because i pass an object to Datasource of MatTableDataSource. And yes, i've imported MatTable module. This is the data i should print:

I'm want to print id for semplicity.

Answer 1

U need to define td for each column you did only for the id column.

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

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

            <!-- Weight Column -->
            <ng-container matColumnDef="weight">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Capo</th>
            <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
            </ng-container>

            <!-- Symbol Column -->
            <ng-container matColumnDef="symbol">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Indirizzo</th>
            <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
            </ng-container>

Answer 2

Have you inject AdminIndexCompanyComponent in your module

import { AdminIndexCompanyComponent } from './your-component-file-path';
@NgModule({
imports: [
    BrowserModule
],
declarations: [
    .....,
    AdminIndexCompanyComponent 
]
bootstrap: [AppComponent]})

export class AppModule { }

like this!!