ERROR TypeError: Cannot read property 'template' of undefined

Question

I am trying to allow users to add ratings to the books they have read. I am using "@angular/material": "^7.3.0" and "@ng-bootstrap/ng-bootstrap": "^4.0.2".

I have imported the following in my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ListComponent } from './components/list/list.component';
import { RegistrationComponent } from './components/registration/registration.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

I have added NgbModule to my imports,

imports: [
    ....,
    NgbModule
  ],

I am trying to show the ratings in my list.component.html. The list.component.ts looks like this,

export class ListComponent implements OnInit {
// other code here
  currentRate = 8;
}

I have imports in list.component.ts but none related to the rating implementation.

The list.component.html for the rating implementation looks like this,

  <ng-container matColumnDef="rating">
    <th mat-header-cell *matHeaderCellDef>Rating</th>
    <td mat-cell>
      <ngb-rating [(rate)]="currentRate"></ngb-rating>
      <pre>Rate: <b>{{currentRate}}</b></pre>
    </td>
  </ng-container>

I am trying to implement this by following the Basic demo example provided at ng-bootstrap rating. The form headers are displayed but no data is shown. The error is

core.js:15714 ERROR TypeError: Cannot read property 'template' of undefined

It has something to do with the rating implementation i am attempting as the form was working fine previously. Thank you in advance.

'template of undefined error' is associated with HTML.Please check your opening closing bracket as well. — omkar
Could you post the full HTML for your list.component.html file? Looks like it's been shortened. — Edric
Yes @Edric I have shortened it. The snippet of code I have put in the post is the only new addition. Nothing else has changed. I am trying to figure out how to show the rating stars under a column called ratings. — Ayubx
This error will come if any typo errors for the field names of mat table. In my case *matCellDef was *matCrllDef — Vinutha Kumar

Ayubx Ayubx · Accepted Answer · 2019-02-11T06:11:35

I added the *matCellDef and inserted the selector for the rating component. So I can see the rating component now but the visual representation is not quite the same as in the example. I will post another question for that.

    <ng-container matColumnDef="rating">
        <th mat-header-cell *matHeaderCellDef>Rating</th>
        <td mat-cell *matCellDef="let element">
          <app-rating></app-rating>
        </td>
      </ng-container>

ERROR TypeError: Cannot read property 'template' of undefined

1 Answers