I am super excited to announce the release of Ignite UI for Angular for 18.2. 

Arguably our biggest release for Angular to date because there are upgrades and additions to make everyone's life easier and UI's better.

Here's why:

- New controls

- Tons of new interactive UX feature in the Angular Grid

- Brand new Angular Business Charting

- New Angular Financial Chartings

- A complete client-side Excel library

The Excel library not only includes tables & formulas support but Charting and Sparkline support. 

We are committed to delivering the fastest grid and chart performance in a native Angular toolset, along with all of the UI controls & components that your teams need to deliver amazing experiences to your customers.

New Controls & Directives

Tree Grid

The new Angular Tree Grid is used to display and manipulate hierarchical data with a consistent schema. Formatted as a table, the Tree Grid provides a line of advanced features such as sorting, filtering, editing, column pinning, column moving, column hiding, paging, and others.  The hierarchical data is rendered using the same columns for each row while providing a way for users to expand and collapse child data.

Combo Box

The Angular Combo Box component provides a powerful input, combining the features of the HTML input, HTML Select and the Ignite UI for Angular igx-drop-down component. The combo component provides easy filtering and selection of multiple items for grouping and adding custom values to the dropdown list. Custom templates can be provided to tailor different component areas, such as items, headers, footers, etc. The combo component is integrated with the Template Driven and Reactive Forms. The igx-combo exposes intuitive keyboard navigation and it is accessibility compliant. Drop Down items are virtualized, which guarantees smooth interactions (even if the igx-combo is bound to a data source with a lot of items).

Dropdown

The Angular Drop Down component displays a scrollable list of items which may be visually grouped and supports selection of a single item. Clicking or tapping an item selects it and closes the Drop Down.

Expansion Panel

The Expansion Panel is a lightweight component which can be rendered in two states – collapsed or expanded. When collapsed, the panel displays a short summary of its contents. The collapsed panel can be toggled using the mouse, or through keyboard interactions, to display any additional content.

 

Tooltip

The igxTooltip and the igxTooltipTarget directives provide the ability to create a fully customizable tooltip and attach it to any element on your page. While most tooltips have a limited number of available positions, with the igxTooltipTarget directive, we can specify any position on the page while keeping it in relation to the target (anchor). The Tooltip also provide various other overlay settings like scroll strategies and custom animations!

Chips

The Angular Chip component is a compact visual component that displays a list of information in an obround shape. The chip can be templated, deleted, and selected. Multiple chips can be reordered and visually connected to each other. Chips reside in a container called chips area, which is responsible for managing the interactions between the chips.

Drag and Drop

The Ignite UI for Angular Drag and Drop directives enable dragging of elements around the page.

Text Highlighting

The Angular Text Highlight directive in Ignite UI for Angular is used to highlight parts of a text, providing options for case sensitive searches and to highlight only exact matches. It also allows the developer to keep an active highlight, which can be any of the already highlighted parts.

 

New Angular Grid Features

Outlook Style Grouping

The Angular Data Grid now supports Outlook style Column Grouping.  This gives you the ability to show data in hierarchical groups by column values. Groups can be expanded or collapsed, and the order of grouping may be changed through the UI or API.

Multi Column Headers

Multi-column headers allow you to group columns under a common header. Every column group could be a representation of combinations between other groups or columns.  Columns within a group still support features like Filtering, Column Pinning, Column Moving, and more.

Grid Quick Filtering

The Angular Grid control provides an extensive filtering API through the Data Container the grid is bound to. There's a default filtering strategy provided out of the box, which the developer can replace with their own implementation. All the standard filtering conditions also come implemented out of the box. In addition, we've provided a way to easily plug in your own custom filtering conditions. 

Grid Cell Editing

The Grid component in Ignite UI for Angular provides you default cell templates for editable columns which are based on the data type of the column. In addition, you can define your own custom templates for editable columns and override the default behavior for committing and discarding changes in the cell value.

Grid Row Editing

Row Editing allows modification of several cells in the row before submitting any row-level changes to the grid's data source. The Angular Grid Row Editing features leverage the Pending Changes functionality of the new Transaction Service.

Transaction Service

The Transaction Service is a component used to accumulate changes in your data grids without affecting the underlying data. The provider exposes API to access, manipulate changes (undo and redo) and discard or commit all to the data.  The Transaction Service works with both cell editing and row editing. The transaction for the cell edit is added when the cell exits edit mode, while row transaction is created when the row exits edit mode. In both cases, the state of the grid edits consists of all updated, added and deleted rows and their last states. Those can later be inspected, manipulated and submitted at once. Changes are collected for individual cells or rows, depending on editing mode, and accumulated per data row/record.

Row Selection

Single and Multiple Row Selection is enabled through a checkbox that is preceding all other columns in the row. Clicking the checkbox will select/deselect the row, and selection will not happen when clicking any other cell in the row. Checkbox column is fixed, which will leave it visible, even a horizontal scrollbar is presented.

Full-Grid Searching

While browsers natively provide search functionality, most of the time the grid virtualizes its columns and rows that are out of view. In these cases, the native search is unable to search the virtualized cells, since they are not part of the DOM. We have extended the Ignite UI for Angular Data Grid with a search API that allows you to search through the virtualized content of the grid.

Conditional Cell Styling

The Grid component in Ignite UI for Angular provides Conditional Cell Styling based on custom rules.  This can be achieved by setting the IgxColumnComponent input cellClasses to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean or a boolean value.

Grid Display Density

The Ignite UI for Angular product is based on Material Design Guidelines.  New to this release is the ability to provide an option to choose between a predefined set of display density options for the controls, but most importantly the Angular Data Grid. By selecting the right density for your use cases, you can significantly improve the user experience when interacting with large amounts of content.

Grid Toolbar

The Grid in Ignite UI for Angular supports a toolbar feature which is essentially a container for UI operations. The toolbar is located at the top of the grid and it matches the grid's horizontal size. The toolbar container hosts different UI controls which are related to some of the grid's features - column hiding, column pinning, excel exporting, etc.

Angular Financial Chart

The toolbar in the Angular Financial Chart has been re-designed and now all type selectors for Indicators, Overlays, Volumes, and Trendlines are combined in one drop-down panel. The Chart Type selector was moved and aligned to the right side of the toolbar for ease of access. Data Range selectors are still displayed in the center of the toolbar.

New Legend

The Financial Chart comes with a new built-in legend displayed between the toolbar and the plotting area. This legend shows data source titles, as well as the last value and percentage change between the first data item and the last data item.

Callouts Annotation

With the Callouts Annotation, you can annotate important data points in Financial Chart or even customize values in callout boxes based on your logic. For example, show stock split, dividends, or calculate the maximum price in your data source.

Crosshairs Annotation

You can configure crosshairs to display as a horizontal line, vertical line or both lines at the location of the mouse cursor. In addition, the Crosshairs Annotation can show values of data points at the location of the mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels.

Final Values Annotation

In Financial Chart, you can use the Final Values annotation to show values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis label.

Tooltip Types

The Financial Chart has a new ToolTipType property that adds two new types of tooltips:

• Category Tooltip which renders combined tooltips for all series at a given date
• Item Tooltip which renders an individual tooltip for each series at a given date

X-Axis Scale Breaks

In Financial Chart, you can define scale breaks on X-Axis to exclude custom ranges in your data source or any day of week. For example, exclude all data items that fall on weekends.

Angular Chart

Creating standard business charts in Angular has never been easier with the Ignite UI for Angular Category Chart.  The Category Chart simplifies the complexities of the data visualization domain into an easy-to-use API. Simply data bind a collection of data, or a collection of collections, to the ‘data’ property of the Chart and watch the magic happen. The Category Chart will analyze the data and automatically choose the best series to represent your data. You can easily decide for yourself which type of chart to use by setting the ‘chartType’ property. Choose from the following chart types: 

• Line
• Area
• Column
• Point
• Spline
• Spline Area
• Step Areas
• Step Line
• Waterfall

 

 

Since the Financial Chart and the Angular Data Chart share the same core API, you get the same features across the charts, like Callouts, Annotation, Crosshairs, Tooltip Types, and much more.

 

Callouts Annotation

With the Callouts Annotation, you can annotate important data points in Category Chart or even customize values in callout boxes based on your logic. For example, calculate maximum values in your data source.

 

Crosshairs Annotation

You can configure crosshairs to display as a horizontal line, a vertical line, or both at the location of the mouse cursor. In addition, the Crosshairs Annotation can show values of data points at the location of the mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels.

Final Values Annotation

In Category Chart, you can use the Final Values annotation to show the values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels.

Highlight Layers

The Category Chart can display two new highlight layers when a user hovers over plotted data points.

• Category Highlight Layer renders a vertical rectangle that stretches from the start to end of the category closest to the mouse cursor. This rectangle is filled with a semi-transparent gray color by default.
• Item Highlight Layer renders a vertical rectangle for each data item in a category that is closest to the mouse cursor. This rectangle is filled with a semi-transparent color that matches the color of the series by default.

Tooltip Types

The Category Chart has a new ToolTipType property that adds two new types of tooltips:

• Category Tooltip which renders the combined tooltips for all series in the data category
• Item Tooltip which renders an individual tooltip for each series in the data category   

Angular Excel Library

The Infragistics Angular Excel Library is a TypeScript library with an Angular API capable of creating Microsoft® Excel® Workbooks (.xls and .xlsx), including Worksheets. You can use its object model to load Excel workbooks, modify them, and then save them again.

The library supports getting and setting data and various format properties on rows, columns, and cells. Further, the library also gives you the ability to control:

• cell styles
• merged cells
• tables (with sorting and filtering)
• data validations
• formula solving, with support for over 300 Excel formulas
• named references
• named ranges
• cell values with mixed formatting
• charting
• sparklines
• and more…

The Excel library can be used to export a grid or table to a workbook document on the client machine or to read an Excel document and display its data in the browser. The library can even be used to solve formulas in the browser just as they would be calculated in Excel, all without sending anything to the server.

Excel Object Model

Using the Infragistics Excel Workbook object model, you can work with spreadsheet data using familiar Microsoft® Excel® spreadsheet objects like Workbooks, Worksheets, Cells, Formulas and many more. The Infragistics Excel Engine makes it easy for you to represent the data of your application in an Excel spreadsheet as well as transfer data from Excel into your application.

The beauty of the Excel library is the Zero Excel Dependency.  The Infragistics Excel Engine is a class library that runs completely independent of Microsoft Excel, so you do not require it to be installed.

Chart Support

With this release, we’ve included support for 70 different chart types. You can now create dashboard reports that visualize data in a clear and easily digestible manner.  This brand-new Excel Charting API gives you complete control over how your charts are rendered in an Excel document with the ability to include a legend, a title, axis titles, and a vast number of options for styling such as gridlines, tick marks, colors and more. You have the full power of Excel charts at the tips of your fingers. The best part, you don’t even need to have MS Excel installed!

Using the Infragistics Excel Library, create or get an instance of the Worksheet object, and then simply call the AddChart method on the Shapes collection. Supply the type of chart you wish to create (choose from 70), provide the size and location of the chart, and then provide the data and any other formatting settings you want to apply to the chart.

Since we are creating native Excel charts, when you open your document in Excel and select a chart, you are given the “Design” and “Format” contextual tabs that you would get if you were to have created the chart directly in MS Excel.

Sparklines Support

A sparkline is a tiny chart in a worksheet cell that provides a visual representation of data. Sparklines are used to show trends in a series of values, such as seasonal increases or decreases, economic cycles, or to highlight maximum and minimum values.  Showing trends in your worksheet data can be useful, especially when you’re sharing your data with other people.

With this release, you can now add sparklines to your Excel documents using the Infragistics Excel Library with one line of code.

Once you have an instance of the Infragistics Worksheet, simply call the Add method on the SparklineGroups collection. Then, supply the type of sparkline you wish to create (Column, Line, or Stacked), provide the cell you wish to insert the sparkline, and then provide the range of cells that represent the data the sparkline will use.

After you have created your sparkline, the Infragistics Excel Library gives you an intuitive API to style various aspects of the sparkline to meet your visualization requirements. The API allows you to enable and control the colors of high and low points, negative points, the first point, the last point, and all markers to name a few.

These styling points align with Microsoft Excel’s contextual “Design” tab that is shown when the sparkline is selected in Excel.

 

Ignite UI For Angular Tooltip Extension for VS Code

We are shipping a new Visual Studio Code productivity tool for Ignite UI for Angular which will provide tooltips for each component shipped in the Ignite UI for Angular product.  Each tooltip will provide the name of the component, a link to the component's documentation which can be clicked directly within the tooltip, and a simple code snippet showing an example of how to use the component.  Users will be able to select and copy the code snippet directly from within the tooltip and paste it into their editor.

The extension is available for download from the Visual Studio Code Marketplace.

Wrap Up

As you can see, this is a massive release for the Angular product.  We’re super excited to get this into your hands.  We’ve added core line-of-business features in the Angular Grid, new UI controls & components, new Charting, new Financial Charting and a complete client-side Excel Library for Angular that includes formula support, charting, and sparkline support. 

As usual, our roadmap and feature set is based on what you tell us, so please send us feedback on what features and functionality you’d like to see in our Angular product.  If you want to follow our development process on Github, check on issues and follow the roadmap or view specs and see what’s in development. We are 100% open on what and how we build Ignite UI for Angular.

To download Ignite UI for Angular today – go to this page and click the Download Now button.  If you have any comments, questions or feedback, shoot me an email at jasonb@infragistics.com.  I look forward to hearing from you!