Angular Framework Features with Kendo UI for Angular
Angular, a robust and widely adopted framework, continues to evolve with each new version. This article explores how Kendo UI for Angular seamlessly integrates with Angular’s powerful features, enhancing your web development experience.
Angular 16 & 17 Features Overview
Explore the latest enhancements introduced in Angular versions 16 and 17. These updates unlock new possibilities for developers, making it even more exciting to combine them with Kendo UI for Angular.
Standalone Components: The Modern Way to Build Angular Applications
The Kendo UI for Angular component library works seamlessly with Angular’s standalone components. This feature allows you to create components that are not tied to a specific module, making them more flexible and reusable across different parts of your application. Check our Getting Started page for each component to see how you can use standalone components in your Angular application.
import { Component } from '@angular/core';
import { KENDO_GRID } from '@progress/kendo-angular-grid';
import { KENDO_SCHEDULER } from '@progress/kendo-angular-scheduler';
import { KENDO_PDFVIEWER } from '@progress/kendo-angular-pdfviewer';
@Component({
standalone: true,
selector: 'my-app',
imports: [KENDO_GRID, KENDO_SCHEDULER, KENDO_PDFVIEWER],
template: `
<kendo-grid></kendo-grid>
<kendo-scheduler>
<kendo-scheduler-month-view> </kendo-scheduler-month-view>
</kendo-scheduler>
<kendo-pdfviewer [url]="url"></kendo-pdfviewer>
`.
})Angular Signals: Interacting with Kendo UI for Angular Components
Signals are a powerful way to communicate between components in Angular and are a great way to interact with Kendo UI for Angular components. You can use signals to update or modify the properties of a component like their data. You can even log errors or react to changes using the effect API.
The following example demonstrates how to use the update, set, compute, and effect Signal APIs to interact with the Kendo UI for Angular Data Grid and Chart components.
Deferrable Views: Optimizing Performance with Kendo UI for Angular
Deferrable views are a new feature in Angular that allows you to defer the rendering of a component until it is needed. This can help improve the performance of your Angular applications by reducing the initial load time and only rendering components when they are needed. This new feature goes hand in hand with Kendo UI for Angular components, allowing you to optimize the performance of your applications by deferring the rendering of Kendo UI for Angular components until they are needed.
The following example demonstrates how to use deferrable views with Kendo UI for Angular components:
Declarative Control: The New Control Flow in Angular
Angular introduced new block template syntax which enhances the developer experience and simplifies control flow operations like *ngIf, *ngFor, and *ngSwitch. The new syntax is closer to JavaScript which brings better performance and type checking. You can integrate the new block template syntax with Kendo UI for Angular components to reduce the use of structural directives and make your code more readable.
The following code snippet demonstrates how to use the if-else block template syntax in the Kendo UI for Angular Grid component:
<kendo-grid [data]="gridData">
<kendo-grid-column field="Item Status">
<ng-template kendoGridCellTemplate let-dataItem>
@if (dataItem.Discontinued) { Item is discontinued }
@else { Item is available }
</ng-template>
</kendo-grid-column>
</kendo-grid>The following code snippet demonstrates how to use the for block template syntax in the Kendo UI for Angular Grid component:
<kendo-grid [kendoGridBinding]="gridData" [height]="200">
@for (column of columns; track column.field) {
<kendo-grid-column
field="{{ column.field }}"
title="{{ column.title }}"
></kendo-grid-column>
}
</kendo-grid>columns = [
{ field: 'ProductName', title: 'Product Name' },
{ field: 'UnitPrice', title: 'Unit Price' },
{ field: 'UnitsInStock', title: 'Units In Stock' }
];The following code snippet demonstrates how to use the switch block template syntax in the Kendo UI for Angular Grid component:
<kendo-grid [data]="gridData">
<kendo-grid-column field="Units in Stock">
<ng-template kendoGridCellTemplate let-dataItem>
@switch (dataItem.UnitsInStock) {
@case 0 { Out of stock }
@case 1 { Low stock }
@default { In stock }
}
</ng-template>
</kendo-grid-column>
</kendo-grid>Self-Closing Tags: Simplifying Angular Component Markup
Angular 16 introduces self-closing tags, which simplify the markup of Angular components. This feature allows you to use self-closing tags for components where there is no need for content between the opening and closing tags. This makes the markup cleaner and more readable.
<kendo-editor [value]="'The quick brown fox'"/>
<kendo-upload [saveUrl]="uploadSaveUrl" [removeUrl]="uploadRemoveUrl"/>
<kendo-textbox/>