title: Angular material table component not showing data
body: <p>I'm struggling to load data inside my angular material table. The columnheaders show as expected except there are now rows of data. The weird thing is that there is data in the data source that is used by the table. See the code (or images) below:</p>
  <p><em><strong>Object type to populate datasource</strong></em></p>
  <pre><code>export default interface UserStripeTableResource {
      id: number;
      fullName: string;
      saldo: number;
      totalstripes: number;
  } 
  </code></pre>
  <p>This is the interface used to populate the list for the table, no weird things I think.</p>
  <p><em><strong>Component (.ts file)</strong></em></p>
  <pre><code>@Component({
    selector: 'app-admin-editsaldo',
    templateUrl: './admin-editsaldo.component.html',
    styleUrls: ['./admin-editsaldo.component.css']
  })
  export class AdminEditsaldoComponent implements OnInit {
  
    @Input() allusersstripes: UserStripeTableResource[];
    @Output() RefreshListOfUsers = new EventEmitter&lt;any&gt;();
  
  
    dataSource: MatTableDataSource&lt;UserStripeTableResource&gt; = new MatTableDataSource();
    dataDisplayedColumns: string[] = ['id', 'fullName', 'saldo', 'totalstripes'];
  
    selectedamount: number = null;
  
    constructor(
    ) { }
  
    ngOnChanges(changes: SimpleChange): void {
    }
  
    ngOnInit() {
      this.dataSource = new MatTableDataSource(this.allusersstripes);
      console.log(this.dataSource.data);
    }
  </code></pre>
  <p>The file that handles the logic for populating the table. As you can see the data is provided by a parent provider (see @input). The data is immediately assigned to the datasource in the ngOnInit. Also the columns are specified correctly, as they are shown on the html page.</p>
  <p><em><strong>HTML Page</strong></em></p>
  <pre><code>&lt;div *ngIf=&quot;dataSource&quot;&gt;
  
      &lt;table mat-table [dataSource]=&quot;dataSource&quot; matSort class=&quot;mat-elevation-z8&quot;&gt;
  
          &lt;!--- Note that these columns can be defined in any order.
            The actual rendered columns are set as a property on the row definition&quot; --&gt;
  
          &lt;!-- Position Column --&gt;
          &lt;ng-container matColumnDef=&quot;id&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; ID &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.id}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Name Column --&gt;
          &lt;ng-container matColumnDef=&quot;fullName&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Naam &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.fullName}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Weight Column --&gt;
          &lt;ng-container matColumnDef=&quot;saldo&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Saldo &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.saldo}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Symbol Column --&gt;
          &lt;ng-container matColumnDef=&quot;totalstripes&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Totaal strepen &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.totalstripes}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;tr mat-header-row *matHeaderRowDef=&quot;dataDisplayedColumns&quot;&gt;&lt;/tr&gt;
          &lt;tr mat-row *matRowDef=&quot;let row; columns: dataDisplayedColumns;&quot;&gt;&lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>The html page that should show the table. The columns match the names specified in the .ts file and are the same as the object properties.</p>
  <p><a href="https://i.stack.imgur.com/qe3nv.png" rel="nofollow noreferrer">Image showing html page with datasource log</a></p>
  <p>Things that I already tried:</p>
  <ol>
  <li>Double checking if every needed module was imported correctly.</li>
  <li>Using ngIf before rendering the table, to make sure the datasource is populated before the table is being rendered.</li>
  <li>Print out the datasource as JSON straight on html page, to double check if it is there before the table is rendered.</li>
  <li>Try with the given example from angular material site itself, that's working (but it uses static data so not really comparable I guess)</li>
  <li>Try ngIf on in parent component on child component, to make sure the async data is there before the component is actually rendered.</li>
  </ol>
  <p>I'm really out of ideas, already struggling a couple a days on this. I really hope that someone can help me out :).</p>
  <p><a href="https://i.stack.imgur.com/wLono.png" rel="nofollow noreferrer">The html source (with no custom css source)</a></p>
  <p><em><strong>List of packages used</strong></em></p>
  <pre><code>brandfonds-website@0.0.0 E:\Prive Projecten\Coding\Brandfonds\Brandfonds-Frontend
  ├── @angular-devkit/build-angular@0.1100.7
  ├── @angular/animations@11.1.0
  ├── @angular/cdk@11.1.0
  ├── @angular/cli@11.1.1
  ├── @angular/common@11.1.0
  ├── @angular/compiler-cli@11.1.0
  ├── @angular/compiler@11.1.0
  ├── @angular/core@11.1.0
  ├── @angular/flex-layout@11.0.0-beta.33
  ├── @angular/forms@11.1.0
  ├── @angular/language-service@11.1.0
  ├── @angular/localize@11.1.0
  ├── @angular/material@11.1.0
  ├── @angular/platform-browser-dynamic@11.1.0
  ├── @angular/platform-browser@11.1.0
  ├── @angular/router@11.1.0
  ├── @fortawesome/fontawesome-free@5.15.2
  ├── @full-fledged/alerts@11.0.0
  ├── @types/chart.js@2.9.30
  ├── @types/jasmine@3.3.16
  ├── @types/jasminewd2@2.0.8
  ├── @types/node@8.9.5
  ├── animate.css@4.1.1
  ├── chart.js@2.9.4
  ├── codelyzer@5.2.2
  ├── font-awesome@4.7.0
  ├── hammerjs@2.0.8
  ├── jasmine-core@3.4.0
  ├── jasmine-spec-reporter@4.2.1
  ├── karma-chrome-launcher@2.2.0
  ├── karma-coverage-istanbul-reporter@2.0.6
  ├── karma-jasmine-html-reporter@1.5.4
  ├── karma-jasmine@2.0.1
  ├── karma@5.1.1
  ├── ng-swagger-gen@2.3.0
  ├── protractor@7.0.0
  ├── rxjs@6.6.3
  ├── ts-node@7.0.1
  ├── tslib@2.1.0
  ├── tslint@6.1.3
  ├── typescript@4.0.5
  └── zone.js@0.11.3
  </code></pre>