title: Why is the <mat-table> without a Datasource not displayed in Angular 7
body: <p>I want to use a <code>&lt;mat-table&gt;</code> 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).</p>
  
  <p>Therefore, my MWE would be this:</p>
  
  <pre><code>&lt;mat-table&gt;
      &lt;mat-header-row *matHeaderRowDef&gt;
          &lt;mat-header-cell&gt;header&lt;/mat-header-cell&gt;
      &lt;/mat-header-row&gt;
  
      &lt;mat-row&gt;
          &lt;mat-cell&gt;
               cell
          &lt;/mat-cell&gt;
      &lt;/mat-row&gt;
  &lt;/mat-table&gt;
  </code></pre>
  
  <p>However, when I look at my page, it just displays a line without any strings. I want to use this table within a <code>&lt;mat-card&gt;</code> (or rather <code>&lt;mat-card-content&gt;</code>), 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:</p>
  
  <p><a href="https://i.stack.imgur.com/fIedV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fIedV.png" alt="Blank Line"></a></p>
  
  <p>How can I correctly display the table?</p>
  
  <hr>
  
  <p><strong>*Edit: *</strong>
  Since it was asked for, here is also the .ts file.</p>
  
  <pre><code>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;
    }
  
  }
  </code></pre>
  
  <p>This is a bit more than the minimal working example, so I'll explain a bit:</p>
  
  <ul>
  <li>One of my options is the resolution, which is choosable by a <code>mat-select</code></li>
  <li>This <code>mat-select</code> is described defined in the html file as below</li>
  <li>This <code>mat-select</code> will be given pre-defined values, as defined in the <code>resolutions</code> array</li>
  <li><p>Another of my options is simply the choice of fullscreen, making it a <code>mat-slide-toggle</code> (however, this is not yet fully implemented)</p>
  
  <p><code>&lt;mat-select #resolutionSelect fxFlex="200px"&gt;
      &lt;mat-option *ngFor="let res of resolutions" [value]="res.value" class="right"&gt;
          {{res.value}}
      &lt;/mat-option&gt;
  &lt;/mat-select&gt;</code></p></li>
  </ul>