title: NullInjectorError: No provider for TemplateRef - Angular 6
body: <p>I am trying to bind data to the table. Some data has been defined in my component. Data has been provided to the datasource (elements). Within the markup there is the *ngFor which I know works to populate a list. But still I am getting an error, not will the html render. I have followed the example of Angular Material design website with some adjustments that I thought would work. </p>
  
  <p>NullInjectorError: No provider for TemplateRef!</p>
  
  <pre><code>    &lt;div class="example-container mat-elevation-z0"&gt;
    &lt;table mat-table #table [dataSource]="elements"&gt;
  
      &lt;!--POSITION COLUMN--------------------------------------------------&gt;
      &lt;ng-container *ngFor="let element of elements" matColumnDef="hangul"&gt;
        &lt;th mat-header-cell *matHeaderRowDef&gt; Hangul &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element of elements"&gt;{{element.hangul}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;!--NAME COLUMN--------------------------------------------------------&gt;
      &lt;ng-container *ngFor="let element of elements" matColumnDef="name"&gt;
        &lt;th mat-header-cell *matHeaderRowDef&gt; Name &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element of elements"&gt;{{element.name}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;!--CHARACTERS COLUMN--------------------------------------------------------&gt;
      &lt;ng-container *ngFor="let element of elements" matColumnDef="character"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Character &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element of elements"&gt;{{element.character}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;!--SOUND COLUMN--------------------------------------------------------&gt;
      &lt;ng-container *ngFor="let element of elements" matColumnDef="sound"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Sound &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element of elements"&gt;{{element.sound}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;!--TYPE COLUMN--------------------------------------------------------&gt;
      &lt;ng-container *ngFor="let element of elements" matColumnDef="type"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Type&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element of elements"&gt;{{element.type}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My html formatting for the tables where the data will be rendered.</p>
  
  <pre><code>import {Component, } from '@angular/core';
  import {DataSource} from "@angular/cdk/collections";
  
  /*
  * ALPHABET COMPONENT MODULE
  * CONSISTS OF DATA ELEMENTS AND ATTRIBUTES
  *
  * */
  @Component({
    selector: 'app-hangul-alphabet',
    templateUrl: './hangul-alphabet.component.html',
    styleUrls: ['./hangul-alphabet.component.scss']
  })
  
  export class HangulAlphabetComponent {
  
  
  
    displayedColumns = ['hangul', 'name', 'character', "sound",'type'];
    elements = ELEMENT_DATA;
  
  
  
    ngOnInit() {
  
    }
  
  }
  
  
  export interface Element {
    hangul    : number;
    name      : string;
    character : string;
    sound     : string;
    type      : string;
  }
  
  
  const  ELEMENT_DATA : Element[] = [
    {hangul : 1,  name: 'giyeok'      , character : 'ㄱ', sound : 'g,k'  ,type: "consonant"},
    {hangul : 2,  name: 'nieun'       , character : 'ㄴ', sound : 'n'    ,type: "consonant"},
    {hangul : 3,  name: 'digeut'      , character : 'ㄷ', sound : 'd,t'  ,type: "consonant"},
    {hangul : 4,  name: 'rieul'       , character : 'ㄹ', sound : 'l,r'  ,type: "consonant"},
    {hangul : 5,  name: 'mieum'       , character : 'ㅁ', sound : 'm'    ,type: "consonant"},
    {hangul : 6,  name: 'bieup'       , character : 'ㅂ', sound : 'b,p'  ,type: "consonant"},
    {hangul : 7,  name: 'shiot'       , character : 'ㅅ', sound : 's'    ,type: "consonant"},
    {hangul : 8,  name: 'leung'       , character : 'ㅇ', sound : 'ng'   ,type: "consonant"},
    {hangul : 9,  name: 'jieut'       , character : 'ㅈ', sound : 'j,ch' ,type: "consonant"},
    {hangul : 10, name: 'chieut'      , character : 'ㅊ', sound : 'ch'   ,type: "consonant"},
    {hangul : 11, name: 'kiuek'       , character : 'ㅋ', sound : 'k'    ,type: "consonant"},
    {hangul : 12, name: 'tieut'       , character : 'ㅌ', sound : 't'    ,type: "consonant"},
    {hangul : 13, name: 'pieup'       , character : 'ㅍ', sound : 'p'    ,type: "consonant"},
    {hangul : 14, name: 'hieutk'      , character : 'ㅎ', sound : 'h'    ,type: "consonant"},
    {hangul : 15, name: 'a'           , character : 'ㅏ', sound : 'a'    ,type: "vowel"},
    {hangul : 16, name: 'ya'          , character : 'ㅑ', sound : 'ya'   ,type: "vowel"},
    {hangul : 17, name: 'o'           , character : 'ㅗ', sound : 'o'    ,type: "vowel"},
    {hangul : 18, name: 'yo'          , character : 'ㅛ', sound : 'yo'   ,type: "vowel"},
    {hangul : 19, name: 'u'           , character : 'ㅜ', sound : 'u'    ,type: "vowel"},
    {hangul : 20, name: 'yu'          , character : 'ㅠ', sound : 'yu'   ,type: "vowel"},
    {hangul : 21, name: 'eu'          , character : 'ㅡ', sound : 'eu'   ,type: "vowel"},
    {hangul : 22, name: 'i'           , character : 'ㅣ', sound : 'i'    ,type: "vowel"},
    {hangul : 23, name: 'ssang gieut' , character : 'ㄲ', sound : 'kk'   ,type: "double consonant"},
    {hangul : 24, name: 'ssang digeut', character : 'ㄸ', sound : 'tt'   ,type: "double consonant"},
    {hangul : 25, name: 'ssang bieup' , character : 'ㅃ', sound : 'pp'   ,type: "double consonant"},
    {hangul : 26, name: 'ssang shiot' , character : 'ㅆ', sound : 'ss'   ,type: "double consonant"},
    {hangul : 27, name: 'ssang jieut' , character : 'ㅉ', sound : 'jj,tch',type:"double consonant"},
    {hangul : 28, name: 'yae'         , character : 'ㅒ', sound : 'yae'  ,type: "diphthongs"},
    {hangul : 29, name: 'e'           , character : 'ㅔ', sound : 'e'    ,type: "diphthongs"},
    {hangul : 30, name: 'ye'          , character : 'ㅖ', sound : 'ye'   ,type: "diphthongs"},
    {hangul : 31, name: 'oe'          , character : 'ㅚ', sound : 'oe'   ,type: "diphthongs"},
    {hangul : 32, name: 'wae'         , character : 'ㅙ', sound : 'wae'  ,type: "diphthongs"},
    {hangul : 33, name: 'wi'          , character : 'ㅟ', sound : 'wi'   ,type: "diphthongs"},
    {hangul : 34, name: 'we'          , character : 'ㅞ', sound : 'we'   ,type: "diphthongs"},
    {hangul : 35, name: 'ui'          , character : 'ㅢ', sound : 'ui'   ,type: "diphthongs"},
    {hangul : 36, name: 'wo'          , character : 'ㅝ', sound : 'wo'   ,type: "diphthongs"},
  ];
  </code></pre>
  
  <p>My component file from which I will be rendering the data.</p>
  
  <p>LINK TO STACKBLITZ : <a href="https://angular-dtc94b.stackblitz.io" rel="nofollow noreferrer">https://angular-dtc94b.stackblitz.io</a></p>