Announcing: Kendo UI for Angular 2 (2016 R3)

The first beta release of the Kendo UI for Angular 2 component suite has arrived, compete with the essentials: form elements, data visualization and grid components.

The wait is over. We are proud to present the first beta release of our Angular 2 component suite, Kendo UI for Angular 2. We included most of the essential business application building blocks—form elements, data visualization and grid components. Each component is designed specifically for Angular 2, with each feature carefully aligned to the framework guidelines. Expect nothing less than complete support for bindable properties and events, templates, data binding to RxJS observables—the list goes on.

Just like Angular 2, Kendo UI for Angular 2 is written in TypeScript, distributed as NPM packages and semantically versioned. This means that you will get updates and bug fixes much more often compared to our current distribution model. Out of the box, the typescript definitions enable autocompletion in IDEs like Visual Studio, Visual Studio Code and WebStorm.

Get started with Kendo UI for Angular 2

Forms

The beta release includes Button, ButtonGroup, DropDownList, ComboBox, Switch, Slider and an Upload component. Kendo UI users should feel familiar with the API—we ported many of the features and the property names from our jQuery suite. Unlike their jQuery counterparts, the ComboBox and the DropDownList support data binding to arrays of primitive values or objects, promises and RxJS Observables. The components work out of the box with the Angular forms, including two-way data binding, change tracking and validation.

DataViz

Unless you are following our roadmap repository closely, you may be pleasantly surprised by the amount of features we managed to include in the Chart. This is not a miracle. Our engineering team managed to extract major parts of our existing DataViz implementation and reuse them in the Angular 2 component. Rest assured, though—the common parts do not depend on jQuery.

The reuse of code enabled us to deliver all series types (bar, line, scatter, pie), panning, zooming, element rendering customization and event handling. Just like the Grid, the ComboBox and the DropDownList, the Chart supports data binding to arrays of primitive values or objects, promises and RxJS Observables through async pipes. 

Grid

Raise your hand if you visited this blog post looking for the grid. You are not the only one—the Grid component is the most popular one in each UI component suite we have released so far. Displaying database records in tabular format for users to review and manage is the bread and butter of most business applications. This beta release delivers a grid that you should definitely take for a spin.

We did our best to start with a future-proof foundation that will evolve into a feature-rich component with no compromises in terms of features or performance. The essentials are here—paging, sorting, basic selection, templates to customize the format of the content, and more. It's worth noting that two complex features, frozen columns and virtual scrolling, are available right from the start. We know that adding these later would have resulted in breaking changes and would have increased the component complexity with multiple rendering modes.

Install Kendo UI for Angular 2

New Themes

The Kendo UI for Angular 2 suite comes with two new themes—a face lift of the classic Kendo UI default theme and a Bootstrap 4-based one. Both use Sass and are published as NPM packages.

• Kendo UI Default Theme (npmjs.com↗)
• Kendo UI Bootstrap Theme (npmjs.com↗)

The Bootstrap theme is perfect if you are using or planning to use Bootstrap 4 in your project. The theme reuses the Bootstrap framework configuration variables, meaning that any customization you apply will automatically propagate to the components styling. 

A Few More Components

In addition to the components listed above, we shipped several additional components that were not in our initial plans. This includes the TabStrip, PanelBar, ScrollView, Sortable and the Popup, and an I18n utility, which is particularly useful when dealing with multiple cultures.

New Website

If you have made it this far without clicking any of the links above, now is the time to venture into the brand new Kendo UI for Angular 2 website. Unlike our previous products, we grouped the content per component—this means that you will find the overview, the demos, the conceptual documentation and the API reference for a given component all in one place. Check out how this works for the Grid.

Begin your journey on the Getting Started page, which will guide you through the necessary steps to include a Kendo UI component in your Angular 2 project.

What’s Next

We are working hard on defining the next component batch for R1 2017. Stay tuned for our next iteration roadmap announcement. In addition to that, if you plan on attending AngularConnect 2016 in London, we’ll be there in full force to chat with you about Angular 2, Kendo UI and NativeScript. We’ve got a number of places where you can see us there. Make sure to drop by one of our sessions, our booth or the Angular 2 and NativeScript Hackathon we’re hosting! It’s going to be a lot of fun.

Get started with Kendo UI for Angular 2