What's New: Ignite UI for Web Components 24.1

Radoslav Mirchev / Thursday, August 8, 2024

Over the past few months, we've made significant improvements to our Ignite UI for Web Components. These enhancements aim to provide developers with even more robust and feature-packed tools to create business-grade web apps. In the latest release, we introduce new features and optimizations that enhance performance, accessibility, and overall UX.

Let’s dive deep and explore these exciting updates.

Version 4.5

 Text Area Component

 The Ignite UI for Web Components Text Area represents a multi-line plain-text editing control. It is useful when you want to allow users to enter a sizeable amount of free-form text, such as a comment on a review or feedback form.

Example of Web Components Text Area Component

 Button group component

 The Web Components Button Group component is used to organize IgcToggleButtonComponents into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling.

Example of Web Components Button Group Component

 Toggle button component

 The IgcToggleButtonComponent is used in combination with the IgcButtonComponent component to achieve toolbar like UX.

 Navigation drawer now supports CSS transitions

 Position attribute for toast and snackbar components

Version 4.6

 Grid State Persistence

 The Ignite UI for React State Persistence in Web Components Data GridWeb Components Tree Grid and Web Components Hierarchical Grid allows developers to easily save and restore the grid state. When the IgrGridState is applied on the React IgrGrid, it exposes the GetStateGetStateAsStringApplyState and ApplyStateFromString methods that developers can use to achieve state persistence in any scenario. The supported features are:

Example of Web Components Grid State Persistence feature

 Action slot added to Snackbar component

 Indicator-expanded slot added to Expansion panel

 Toggle-icon-expanded slot added to Select

Version 4.7

 Tree component update

 Rating component update

 Toggle-icon-expanded slot added to Select

Version 4.8

 Hierarchical Grid component

 The Ignite UI for Web Components Hierarchical Data Grid displays and manipulates hierarchical tabular data. Quickly bind your data with very little code or use a variety of events to customize different behaviors. This component provides rich features like data selection, excel style filtering, sorting, paging, templating, column moving, column pinning, export to Excel and CSV, and more. The Hierarchical Grid builds upon the Flat Grid Component. It extends its functionality by allowing the users to expand or collapse the rows of the parent grid, revealing corresponding child grids when more detailed information is needed.

Example of Web Components Hierarchical Grid component

 Combobox component update

 Button and Icon Button components update

 Navigation bar update

Version 4.9

 Button Group component update

 Input component update

 Text Area component update

Version 4.10

 Banner component

 Web Components Banner Component provides a way to easily display a prominent message to your application's users in a way that is less transient than a Snackbar and less obtrusive than a dialog. The Banner can also be configured to display custom action buttons and an icon.

Example of Web Components Banner Component

 Divider component

 The divider component enables users to separate content both horizontally and vertically.

 New Date Picker component

 Web Components DatePicker is a feature-rich component for entering a date through manual text input or choosing date values from a calendar dialog that pops up. Lightweight and simple to use, the DatePicker in Web Components lets users navigate to a desired date with several view options: month, year, and decade. There are the usual min, max, and required properties to add validation.

 Radio Group component update

To Wrap It All Up...

 Seamlessly crafted for compatibility, Ignite UI for Angular is the library that enables you to leverage the power of the latest technologies and major releases. Committed to providing you with the best Angular UI toolkit and related insights, our goal is to equip you with more know-how, new features, enhanced performance, and improved stability. Some of the enhancements were added thanks to the requests from users like yourself through our Ignite UI for Web Components GitHub repository. With this in mind, we are always open to suggestions and feedback – it makes us grow and better respond to your development needs.

If you need more details, we encourage you to check out our:

In Addition

 Follow Ignite UI on Medium to stay up to date and learn about the latest Angular-related projects we are working on. Give us a star on GitHub and help us continue improving our product by addressing any concerns, questions, or feature requests in the issues section.

Ignite UI for Web Components