I am trying to use Kendo UI core in Angular 19, but my components are not rendering correctly, if at all.
My component template looks like this:
<h1>Hello Kendo UI for Angular!</h1>
<kendo-dateinput></kendo-dateinput>
<kendo-dropdownlist
[data]="dropDownItems"
[defaultItem]="defaultItem"
textField="text"
valueField="value"
[style.width.px]="170"
/>
My component code looks like this:
import { Component } from '@angular/core';
import { categories, Category } from './data.categories';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: false,
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'KendoDemo';
public dropDownItems: Category[] = categories;
public defaultItem: Category = { text: "Filter by Category", value: null };
}
The component packages were added using "ng add", and my angular.son is referencing the css:
"styles": [
{
"input": "node_modules/@progress/kendo-theme-default/dist/all.css"
},
"src/styles.css"
],
My Angular module looks like this:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {DateInputModule} from '@progress/kendo-angular-dateinputs';
import {DropDownListModule} from '@progress/kendo-angular-dropdowns';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
DateInputModule,
DropDownListModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I added the BrowserAnimationsModule manually because an error was reported in the browser. Why are my components not rendering correctly? They look like they have no CSS attached. Any help is greatly appreciated!
The full source code for the demo is here: https://bitbucket.org/mentalshard/kendodemo2/src/master/
-
Can you provide a public repo where we can view the code and packages? Everything looks correct, but the issue might be due to missing Kendo Themes or the Angular Localize package.Yan-dev– Yan-dev2025年02月24日 13:13:06 +00:00Commented Feb 24 at 13:13
-
I edited the question to add a repo URL. I appreciate any help you can provide.tutiplain– tutiplain2025年02月24日 17:32:25 +00:00Commented Feb 24 at 17:32
-
The link throws 404 "Repository not found". Please make sure that the link to the repository is correct or existing.Yan-dev– Yan-dev2025年02月25日 07:54:47 +00:00Commented Feb 25 at 7:54