Search code examples
angularangular-materialmat-table

Why is the <mat-table> without a Datasource not displayed in Angular 7

I want to use a <mat-table> to display the name of an option and it's corresponding given value (for the user to change). Since the options may need to have their values set by different means (such as a slide-toggle or a mat-selection), I have to write this down without a Datasource (or at least as far as I could find, one can not use prewritten html tags in the typescript file).

Therefore, my MWE would be this:

<mat-table>
    <mat-header-row *matHeaderRowDef>
        <mat-header-cell>header</mat-header-cell>
    </mat-header-row>

    <mat-row>
        <mat-cell>
             cell
        </mat-cell>
    </mat-row>
</mat-table>

However, when I look at my page, it just displays a line without any strings. I want to use this table within a <mat-card> (or rather <mat-card-content>), but even if I try it outside that, I just get the line and nothing else. This is what it looks like within the mat card:

Blank Line

How can I correctly display the table?

*Edit: * Since it was asked for, here is also the .ts file.

import { Component, OnInit, ViewChild } from '@angular/core';

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


  @ViewChild('resolutionSelect') resolutionSelect: MatSelect;

  resolutions: ResolutionOptionsInterface[] = [
    { value: '1920 x 1080' },
    { value: '800 x 600' }
  ];
  public selectedRes = this.resolutions[0];
  public isFullscreenEnabled = true;

  constructor() { }

  ngOnInit() {
    console.log("in oninit");
    this.resolutionSelect.value = this.resolutions[0].value;
  }

}

This is a bit more than the minimal working example, so I'll explain a bit:

  • One of my options is the resolution, which is choosable by a mat-select
  • This mat-select is described defined in the html file as below
  • This mat-select will be given pre-defined values, as defined in the resolutions array

  • Another of my options is simply the choice of fullscreen, making it a mat-slide-toggle (however, this is not yet fully implemented)

    <mat-select #resolutionSelect fxFlex="200px"> <mat-option *ngFor="let res of resolutions" [value]="res.value" class="right"> {{res.value}} </mat-option> </mat-select>

Solution

  • In fact, it is possible to create a material table without a datasource. You need to make sure you made the header definitions with displayed columns and all.

    Example - html file:

    <table mat-table class="mat-elevation-z8">
  <ng-container matColumnDef="someValue">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Some Value Header</th>
  </ng-container>

  <ng-container matColumnDef="someOtherValue">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
      Some Other Value Header
    </th>
  </ng-container>

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

    inside ts file, you need to have defined your array

    displayedColumns: string[] = ['someValue', 'someOtherValue'];

    Edit: If your requirement is just a simple table with a couple of predefined values, you can achieve it by using native table element with material css classes:

    <table class="mat-table" >
  <tr class="mat-header-row">
    <th class="mat-header-cell">A</th>
    <th class="mat-header-cell">B</th>
  </tr>
  <tr class="mat-row">
    <td class="mat-cell">A</td>
    <td class="mat-cell">B</td>
  </tr>
</table>