0

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/

asked Feb 22 at 21:40
3
  • 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. Commented Feb 24 at 13:13
  • I edited the question to add a repo URL. I appreciate any help you can provide. Commented 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. Commented Feb 25 at 7:54

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.