DataGrid: ng-template not a known element, "let-" is only supported on template elements.

[olie]

Hi,
just started using Angular2 and primeNG. Im trying a simple example using DataGrid. However I'm unable to define <ng-template> inside <p-dataGrid>. I get follwing error at runtime:

Code: Select all

Unhandled Promise rejection: Template parse errors:
"let-" is only supported on template elements. ("<div class="ui-widget select-images">
     <p-dataGrid [value]="assets">
        <ng-template [ERROR ->]let-asset pTemplate="item">
            asset content here
        </ng-template>
"): SelectImagesComponent@2:21

Anyone run into the same problem ? Some help would be very much appreciated

thanks

component:

Code: Select all

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

import { AppState } from 'app/model/app-state';
import { Asset } from 'app/model/asset.model';

@Component({
	selector: 'ps-select-images',
	templateUrl: './select-images.component.html',
	styleUrls: ['./select-images.component.scss'],
	encapsulation: ViewEncapsulation.None
})

export class SelectImagesComponent implements OnInit {
	assets: Asset[];

	ngOnInit() { }
}

template:

Code: Select all

<div class="ui-widget select-images">
     <p-dataGrid [value]="assets">
        <ng-template let-asset pTemplate="item">
            asset content here
        </ng-template>
    </p-dataGrid>
</div>

app.module.ts:

Code: Select all

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { InputTextModule } from 'primeng/components/inputtext/inputtext';
import { ButtonModule } from 'primeng/components/button/button';
import { TabViewModule } from 'primeng/components/tabview/tabview';
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
import { StepsModule } from 'primeng/components/steps/steps';
import { ToolbarModule } from 'primeng/components/toolbar/toolbar';
import { ProgressBarModule } from 'primeng/components/progressbar/progressbar';
import { DataGridModule } from 'primeng/primeng';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { WizardBarComponent } from './components/wizard-bar/wizard-bar.component';
import { FooterBarComponent } from './components/footer-bar/footer-bar.component';
import { SelectImagesComponent } from './components/select-images/select-images.component';

@NgModule({
  declarations: [
    AppComponent,
    WizardBarComponent,
    FooterBarComponent,
    SelectImagesComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpModule,
    InputTextModule,
    ButtonModule,
    TabViewModule,
    FileUploadModule,
    StepsModule,
    ToolbarModule,
    AppRoutingModule,
    ProgressBarModule,
    DataGridModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[lars2k]

Hello Oli,

the problem is that in Angular2 it's named template instead of ng-template (this is Angular4).
So your template should look like this:

Code: Select all

<div class="ui-widget select-images">
     <p-dataGrid [value]="assets">
        <template let-asset pTemplate="item">
            asset content here
        </template>
    </p-dataGrid>
</div>

[olie]

Thank you so much! That solved my problem. I was not aware of Angular 4 !?

[Aravind18294]

Hi,
when I am trying to use the below code it was showing the error, please check and provide some solution

<template #monthviewDefaultEventDetailTemplate let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
<ion-list class="event-detail-container" has-bouncing="false" *ngIf="showEventDetail" overflow-scroll="false">
<ion-item *ngFor="let event of managelist" (click)="eventSelected(event)">
<span *ngIf="!event.allDay" class="monthview-eventdetail-timecolumn">{{event.startTime|date: 'HH:mm'}} - {{event.endTime|date: 'HH:mm'}}
</span>
<span *ngIf="event.allDay" class="monthview-eventdetail-timecolumn">All day</span>
<span class="event-detail"> | {{event.title}}</span>
</ion-item>
<ion-item *ngIf="managelist.length==0">
<div class="no-events-label">{{noEventsLabel}}</div>
</ion-item>
</ion-list>
</template>

error is
errors:
"let-" is only supported on ng-template elements. ("
</calendar>

<template #monthviewDefaultEventDetailTemplate [ERROR ->]let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabe"): ng:///AppModule/HomePage.html@50:49
"let-" is only supported on ng-template elements. ("</calendar>