My Kendo UI Core added components are not rendering correctly in Angular 19

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!

Continue reading...