I want to use the Kendo-Grid at Angular4, but I keep gettng this error:
Uncaught Error: Template parse errors:
'Kunden-grid' is not a known element:
1. If 'Kunden-grid' is an Angular component, then verify that it is part of this module.
2. If 'Kunden-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<h1>{{title}}</h1>
<searchfield></searchfield>
[ERROR ->]<Kunden-grid></Kunden-grid>
I folloed the guide at http://www.telerik.com/kendo-angular-ui/getting-started/#installation to install Kendo-angular-ui. The app.component:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Kontaktsuche';
}
And the template for the app.component:
<h1>{{title}}</h1>
<searchfield></searchfield>
<Kunden-grid></Kunden-grid>
The component that contains the grid:
import {Component} from '@angular/core';
@Component({
selector:'Kunden-grid',
template: `
<div ngIf="gridData">
<kendo-grid [data]="gridData" [height]="500">
<kendo-grid-column field="ID" title="ID" width="5%"></kendo-grid-column>
<kendo-grid-column field="Name1" title="Name" width="20%"></kendo-grid-column>
<kendo-grid-column field="PLZ" title="Plz" width="10%"></kendo-grid-column>
<kendo-grid-column field="Ort" title="Ort" width="20%></kendo-grid-column>
<kendo-grid-column field="Strasse" title="Strasse" width="15%"></kendo-grid-column>
<kendo-grid-column field="Land" title="Land" width="5%"></kendo-grid-column>
<kendo-grid-column field="Telefon1" title="Telefon" width="15%"></kendo-grid-column>
<kendo-grid-column field="Telefax" title="Telefax" width="15%"></kendo-grid-column>
</kendo-grid>
</div>
`
})
export class KundenGrid {
private gridData: any[] = [];
public setGridData(Data: any[]){
this.gridData = Data;
}
}
I changed the app.module.ts to:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { SearchFieldComponent} from './searchfield.component';
import { FormsModule} from '@angular/forms';
import { searchService} from './search.service';
import { HttpModule} from '@angular/http';
import {GridModule} from '@progress/kendo-angular-grid';
@NgModule({
imports: [BrowserAnimationsModule , BrowserModule, FormsModule , HttpModule , GridModule ],
declarations: [ AppComponent,
SearchFieldComponent],
providers:[searchService],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I also tryed to include the @progress/kendo-angular-grid/dist/es/main.js to .angular-cli.json but that didnt help too. Is there something like the Systemjs.cofig where I have to include the kendo-grid-package ?
You are missing to import the "Kunden-Grid" component in your app.module.ts in the declaration section. To get over your hurdle, your app.module.ts should look like the following:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { SearchFieldComponent} from './searchfield.component';
import { FormsModule} from '@angular/forms';
import { searchService} from './search.service';
import { HttpModule} from '@angular/http';
import {GridModule} from '@progress/kendo-angular-grid';
import {KundenGrid} from ./kunden-grid.component';
@NgModule({
imports: [BrowserAnimationsModule , BrowserModule, FormsModule , HttpModule , GridModule ],
declarations: [ AppComponent,
SearchFieldComponent, KundenGrid],
providers:[searchService],
bootstrap: [ AppComponent ]
})
export class AppModule { }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.