Ignite UI for Angular 10.2.0 Release

It has been a busy time here at Infragistics, with a number of Ignite UI updates and new releases coming in the past few weeks. Now we are proud to announce the release of Ignite UI for Angular 10.2.0!

With this release, we offer some unique, new Angular components and enhanced features including delighters for developers and users. From the new Add Row feature for our Angular Data Grid / Data Table, to the enhancements to the Calendar and Overlay, Ignite UI for Angular 10.2 will help developers provide the best possible user experience in their Angular applications.

Angular Grids: Grid, Tree Grid and Hierarchical Grid 

 Native add row for Angular grid 

Ignite UI for Angular Grid component provides an easy way to perform data manipulation operations like creating, updating, and deleting records. Now we are introducing the Angular add row feature. The feature provides a convenient way to perform data manipulations through inline row adding and a powerful API for Angular CRUD operations. It is designed to work together with the Angular action strip component to achieve the best possible user experience. 

An example of behavior in the Angular Tree Grid:

Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free.

 Enhanced Hierarchical Data Grid multi-cell selection behavior  

The selection feature enables rich data select capabilities in the Material UI based Hierarchical Grid. Variety of events and single select actions are available thanks to the powerful API and easy to use methods. The Hierarchical Grid now supports three modes for cell selection, and you can easily switch between them by changing cellSelection property. You can disable cell selection, you can select only one cell within the grid or to select multiple cells in the grid, which is provided as default option. But let's dive deeper in each of these options. 

 New public events – cellEditDone & rowEditDone for angular grid cell editing and row editing 

Enhancements in the cell/row editing events execution sequence and cancelation. Cell and row editing now provides a complete and fully functional editing life cycle. It gives you а full control over the data manipulation process by exposing several cancelable and non-cancelable events, annotating every user step. Check the table and play-around with the interactable editing sample for more information.

 Column moving through API 

API method for column moving is another feature requested by our clients in Ignite UI git repository that we have fulfilled. In addition to the drag and drop functionality, the Column Moving feature also provides two API methods to allow moving a column/reordering columns programmatically.  

Angular Components: Calendar, Date Picker, Time Picker, Navigation Drawer and Tabs 

 Calendar Keyboard navigation accessibility 

Improved Angular calendar component with active element keyboard navigation which is in compliance with Fundamental Keyboard Navigation Conventions section of W3C’s WAI-ARIA Authoring Practices 1.1. 

 Week numbers in angular date picker component and angular calendar component

 Week numbers became an important part of the enterprise culture and are good addition to your application . You can now use showWeekNumbers input to show the week numbers for both Angular Calendar and Angular Date Picker components. 

 Add disable animations option for tabs component and navigation drawer component  

We have added new properties, Navigation Drawer disableAnimation and tabs disableAnimation to disable animation similar to Angular Material tabs. 

 Customize text label of the time picker component 

By placing an igxlabel inside a <label> tag nested in the Angular time picker component, the default label can be changed to a custom one. 

Overlay 

 Move PositionSettings to OverlaySettings 

 Changing the target of the position settings of the overlay could turn to be cumbersome for our clients we have moved the target property to the Overlay Settings. This will now make it easier for the target to be changed without the need to alter/override the position settings every time.  

 Implement factory functions for creating OverlaySettings 

Excel Style Filter

 Excel Style Filter interactions 

 Excel Style Filter interactions have been enhanced in order resemble Excel filter. Now moving from Excel to modern Angular application will be even easier for the users as interactions and key board navigation are the alike desktop ones.   

 Angular Data Grid export indicator 

Sometimes when the grid has a lot of data, exporting that data to Excel or CSV can take some time. That's why we added the Angular data grid exporting indicator at the bottom of the toolbar, which tells whether an exporting is in progress. If the exporting process takes longer than 500ms, the indicator will appear at the bottom of the toolbar and hide once the exporting finishes.  

 Ignite UI Excel Exporter Service  

 Now you can set custom name of the worksheet in exported workbook in the Ignite UI Grid Export to Excel Service.

In summary, the Infragistics Angular team continues to strive to create an effortless experience for developers with our Angular components and controls. To quote the WP Carey School of Business - “The best companies deliver straightforward, reliable experiences that meet real needs. People want to interact with companies where doing business is personalized, easy and hassle-free.” 

Material Icons Extended 

We are happy to present you the Ignite UI Material Icons Extended which is a subset of icons that extends the material icon set by Google. “Icons have always been important in enhancing the user experience, not only for navigating easily through the information in your app or on your web site but also in increasing the readability of the content by summarizing it, making it exciting and drawing the user’s attention to the most important parts of your web projects. “ Read more in “220+ Material Inspired Icons for Great User Experience” on Ignite UI page on Medium.com.

Here it is the complete Ignite UI for Angular Change Log for 10.2.0

• IgxGridActions
  • Added asMenuItems Input for grid actions - igx-grid-editing-actions, igx-grid-pinning-actions. When set to true will render the related action buttons as separate menu items with button and label.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Behavioral Change - The Excel Style Filtering has been reworked to provide filtering experience such as in Excel. This includes the following changes:
    • You can close the Excel Style Filtering menu by pressing Ctrl + Shift + L.
    • You can apply the filter by pressing Enter.
    • When searching items in the Excel Style Filtering menu, only the rows that match your search term will be filtered in.
    • By checking the Add current selection to filter option, the new search results will be added to the previously filtered items.
• IgxInputGroup
  • Breaking Change - Removed fluent, fluent_search, bootstrap, and indigo as possible values for the type input property.
  • Behavioral Change - The styling of the input group is now dictated by the theme being used. The remaining types - line, border, and box will only have effect on the styling when used with the material theme. The search type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Rename outputs onRowEditEnter to rowEditEnter onCellEditEnter to cellEditEnter onCellEdit to cellEdit onRowEdit to rowEdit
  • Breaking Change - The onCellEditCancel event is replaced by the new cellEditExit event that emits every time the editable cell exits edit mode.
  • Breaking Change - The onRowEditCancel event is replaced by the new rowEditExit event that emits every time the editable row exits edit mode.
• IgxOverlay
  • Breaking Change - target property in PositionSettings has been deprecated. You can set the attaching target for the component to show in OverlaySettings instead.
• IgxToggleDirective
  • onAppended, onOpened and onClosed events are emitting now arguments of ToggleViewEventArgs type.
  • onOpening and onClosing events are emitting now arguments of ToggleViewCancelableEventArgs type.
• IgxSelect
  • Added aria-labelledby property for the items list container(marked as role="listbox"). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
• IgxDatePicker
  • Breaking Change - Deprecated the label property.
  • Added aria-labelledby property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
• igxNavigationDrawer
  • Added disableAnimation property which enables/disables the animation, when toggling the drawer. Set to false by default.
• igxTabs
  • Added disableAnimation property which enables/disables the transition animation of the tabs' content. Set to false by default.
• IgxExpansionPanel
  • IExpansionPanelEventArgs.panel - Deprecated. Usе owner property to get a reference to the panel.
• IgxCalendarComponent, IgxMonthsViewComponent and IgxYearsViewComponent
  • tabIndex property was removed in order to improve on page navigation and to be compliant with W3 accessability recommendations; Also the date grid in the calendar is now only one tab stop, the same approach is applied and in the IgxMonthsViewComponent and IgxYearsViewComponent;

New Features

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
  • cellEditExit is a new event that fires when cell exits edit mode
  • rowEditExit is a new event that fires when row exits edit mode
  • Added getRowData(rowSelector) method that returns an object that represents the data that is contained in the specified row component.
  • Added ability to spawn row adding UI through exposed methods. Note that rowEditing should be enabled.
    • beginAddRow method which starts the adding row UI.
    • beginAddChild method which starts the adding child UI.

    this.grid.beginAddRow(rowID);

    • Added an input properties to IgxGridEditingActions component to show/hide add row and add child buttons which trigger the UI based on context expression.

    <igx-tree-grid[rowEditing]="true"><igx-action-strip#actionStrip><igx-grid-editing-actions[addRow]="true" [addChild]="actionStrip.context.level < 3"></igx-grid-editing-actions></igx-action-strip></igx-tree-grid>

  • A new locale and pipeArgs parameters are introduced in the operate method exposed by the IgxNumberSummaryOperand and IgxDateSummaryOperand, which exposes the grid locale. Use the locale parameter to get localized summary data (as per the grid locale. If not passed, locale defaults to 'en-US'). Use the pipeArgs parameter only if you want to customize the format of the date and numeric values that will be returned.

  classMySummaryextendsIgxDateSummaryOperand{operate(columnData: any[],allData=[],fieldName,locale: string,pipeArgs: IColumnPipeArgs): IgxSummaryResult[]{constpipeArgs: IColumnPipeArgs={format: 'longDate',timezone: 'UTC',digitsInfo: '1.1-2'}constresult=super.operate(columnData,allData,fieldName,locale,pipeArgs);returnresult;}}

  • A new pipeArgs input property is exposed by the IgxColumnComponent, which is used to pass arguments to the Angular DatePipe and DecimalPipe, to format the display for date and numeric columns.

• IGX_INPUT_GROUP_TYPE injection token
  • Allows for setting an input group type on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a type.
• IgxExcelExporterService
  • Added worksheetName property to the IgxExcelExporterOptions, that allows setting the name of the worksheet.
• IgxDatePicker
  • The the label property have been deprecated and a custom label can also be set by nesting a inside the tags.
• IgxTimePicker
  • Added a custom label functionality.
• IgxCalendar and IgxDatePicker - new showWeekNumbers input, that allows showing of the week number at left side of content area.
• IgxOverlay
  • The PositionSettings target property has been deprecated and moved to OverlaySettings.
  • An optional Point/HTML Element parameter target has been added to the position() method
  • Added createAbsoluteOverlaySettings and createRelativeOverlaySettings methods which create non-modal OverlaySettings based on predefined PositionSettings. The methods are exposed off the IgxOverlayService.
    • createAbsoluteOverlaySettings creates non-modal OverlaySettings with GlobalPositionStrategy or ContainerPositionStrategy if an outlet is provided. Accepts AbsolutePosition enumeration, which could be Center, Top and Bottom. Default is Center.

    constglobalOverlaySettings=IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);

    • createRelativeOverlaySettings creates OverlaySettings with AutoPositionStrategy, ConnectedPositioningStrategy or ElasticPositionStrategy. Accepts target, strategy and position. The target is the attaching point or element for the component to show. The position strategy is a RelativePositionStrategy enumeration, which defaults to Auto. The position is a RelativePosition enumeration. Possible values are Above, Below, Before, After and Default. The default option is Default, which positions the element below the target, left aligned.

    consttargetElement=this.button.nativeElement;constconnectedOverlaySettings=IgxOverlayService.createRelativeOverlaySettings(targetElement,RelativePositionStrategy.Connected,RelativePosition.Above);

• IgxToast
  • The component now utilizes the IgxOverlayService to position itself in the DOM.
  • An additional input property outlet has been added to allow users to specify custom Overlay Outlets using the IgxOverlayOutletDirective;
  • The position property now accepts values of type IgxToastPosition that work with strict templates.
• IgxExpansionPanelHeader
  • onInteraction is now cancelable
  • Added iconRef property. This can be used to get a reference to the displayed expand/collapsed indicator. Returns null if iconPosition is set to NONE.

Looking Down The Road

One milestone is down and we are onto the next one. If you are curious about what is coming next, you can always check our Roadmap board and file. You can get a sneak peek of what is "cooking" in the Ignite UI for Angular Sprints through the GitHub Projects. Now you can follow the progress of your issues and be part of the process as you comment, report or request features on GitHub

Follow us on Medium and stay up-to-date with the latest Angular-related projects that we are working on. Give us a star on GitHub and help us to continue to improve our product by addressing any concerns, questions or feature requests in the issues section.  We will continue to do our best to constantly improve our product experience to meet all your needs and build apps with ease.