What's New in 18.1: Ignite UI for Angular

With today's release, Ignite UI for Angular includes 50-plus best-of-breed Material based components – now with the fastest data grid & charting available.  Optimized for performance and detail level control, all Angular components can handle large datasets smoothly with Infragistics Virtualization directive and are easily branded or themed through an intuitive API. 

Ignite UI’s Angular Data Grid has added several features including paging, header, cell and footer templates, editing cells directly or through a dialog box, column pinning, hiding, column summaries, advanced sorting and filtering, and exporting to Excel, CSV, and TSV files.

New Angular Chart components include the lightweight, high-performance Financial Chart, and Category Chart. Display data in one of many chart types, including; line, area, column point, spline, step, waterfall and more.

Furthermore, our Ignite UI for Angular CLI tool is providing an open-source, no-code solution for developers working within the command line. It allows for easy, industry standard scaffolding of necessary application files, importing of often used modules for quick building, and worry-free installation of necessary project dependencies.

Let’s look at the host of updates to Ignite UI for Angular.  If you'd like to just jump ahead and start trying it out for yourself, download our Ignite UI for Angular trial.

Grids and Lists 

Now, let’s focus on some of our flagship updates for this release: the new capabilities with our Grid components. You’ll be pleased to see that we’ve incorporated a slew of features with our igxGrid component, and you can read about all of them on the components page.  

Column Pinning 

With column pinning, we’ve now allowed users to pin a single column or multiple columns to the left-hand side of the grid. With the columns pinned in this fashion, a user will be able to see those specific columns all the time while horizontally scrolling, and it serves as a great way to keep track of the data that you’re viewing.  

 

Column Resizing 

On top of pinning, we’ve added deferred column resizing with igxColumnResizing. This neat feature incorporates a delayed update, meaning that it shows the user a temporary resize indicator while the drag operation is in effect. The new column size is then only put in place once the drag operation ends.  

 

 

Export to Excel/CSV/TSV 

Moving forward, users can export their grid data into the format of their choosing: Excel, CSV, and TSV. So, if you’re looking to edit offline or you need to do some offline presenting, the export function for igxGrid is now your go-to operation. 

 

Summaries 

Continuing with featured components, there has now been a summaries section added to the grid. Summaries are an excellent way to quickly see column data, as they display default information about the column in a separate container. Given the data type in the column, the summaries in the container will change, and it’s helpful to note that each summary is on a per-column level.  

 

Row Selection 

The last highlighted addition to the grid rests with the row selection feature. The grid now supports the selection of one or multiple rows through a checkbox that precedes all the other columns in the row. This makes it easy for a user to select and to deselect specific rows.  

 

Editors 

So, now leaping beyond our grid attributes, we’ll move into our new grid editors. In Ignite UI for Angular, our grid component provides the ability for users to edit the data it displays through inline editors in the grid cells and through editing dialogs that will spawn. Accordingly, we have two editors to present with this 18.1 update, and you can view the whole list of editors. 

Mask Directive 

The igxMask directive is providing the developer the means to control user input and to format the visible value based on configurable mask rules. It’s touted as very easy to use and to configure, providing different input options. The example below demonstrates a simple personal data form. 

 

Input Groups 

Speaking about input groups, it’s an excellent time to discuss our refactoring of igxInputGroup. We went ahead and decided to ease the user experience of inputting data, so we added new input groups to our controls. This is allowing developers to craft easy-to-use, good-looking forms and, to boot, ones that handle validation and errors really well. In the examples, you can see both “Line Style Input” and “Border Style Input”: 

 

 Theming 

We had one addition to our Styles & Themes category, and that is the recent theming mechanism. Mainly, we developed a new mechanism through SASS that enables another intuitive API for changing the theming of your various components. Our team designed it so that users only need to account for a few lines of code to style according to their needs. Handily, you can restyle one component, multiple components, or change the styling of the entire suite.  

 

Toggle 

In our “Interactions” section, we brought to you the much needed igxToggle directive. On a basic level, this allows users interactivity in opening, animating, and closing a toggle container. The rest of igxToggle allows for the implementation of toggle-based components and views, like a drop-down, while igxToggleAction controls all of the other “toggleable” components.  

 Tabs 

Within our Layouts section, we’ve implemented the igxTab component to organize or to switch between similar data sets. The tabs are placed at the top and allow for scrolling when there are multiple tab items. 

 

Time Picker 

And, last but not least, is our Scheduling feature, the Time Picker component. With igxTimePicker, the user can select a time from a dialog with spinners. A seemingly small addition, but very useful! 

 

Financial Chart 

Now, let’s focus on another of our flagship tools for this release: the new igxFinancialChart component. This offers developers the ability to craft lightweight, high-performance, and easily configured charts to display financial data. It boasts a simple and intuitive API for working with and binding your data or data collections. On top of that, the chart offers multiple ways in which a user can display or visualize the financial data, providing context and clarity to relevant information. If you needed any more urging to try out this control, it also intuitively and automatically analyzes and selects data columns for the user. It’ll go ahead and use the Date and Time columns for the x-axis, and the y-axis will be dedicated to Open, High, Low, Close, and Volume. If you don’t have y-axis columns specifically devoted to those titles, it’ll also pick the first five numeric columns. You can see a detailed list of the component's features on  

Below, you can see an example of an automated chart: 

By including this support for OpenFin and extending our controls, we’re broadening our scope to help developers who are extensively working with primary and secondary capital market applications.  

Category Chart 

With the excitement from the financial chart control, it seems natural to move into our new component for visualizing category data. Essentially, igxCategoryChart simplifies the complexities of the data visualization domain into an uncomplicated API. You can effortlessly bind a collection of data, or even a collection of collections, and let Category Chart do the rest. It’ll analyze your data and then automatically select the best series for the data’s representation.  

 

You’ll have a variety of chart types to choose from Spline, Point, Waterfall, Line, and many others. 

Virtualization 

Now that we’ve seen our significant charting and Data Grid additions, we should pay mind to our other significant change: the virtualization directive. We’ve added the igxForOf directive to aid in the rendering of large-scale data sets in your applications without loss to performance. This will allow a user to smoothly scroll through big data sets and keep the application running at optimal capacity.  

On top of this, the igxForOf directive can be incorporated into almost any component that needs to render the vast amounts of data, giving you considerable options when working behind the scenes with your application. 

Overall, we see some super exciting features and components added to Ignite UI for Angular in this release. It’s bringing OpenFin support and functionality to address growing development trends in the financial markets space, and it’s delivering lightweight grids and charts for your data display needs. As we continue to add features and new components in an on-going basis, please make sure to check out the Ignite for UI Angular page, where you can create or use your existing Infragistics account, or pop open the command line, and get to try out these powerful features. Beyond that, you should follow us on Twitter via @Infragistics for product news and stay up-to-date with our Community Forums.

Lastly, if you have future feature requests, please submit them via our Product Ideas website.