Log in to like this post! Ignite UI for Angular 12.1.0 Release Radoslav Mirchev / Wednesday, July 28, 2021 It is time for our third major release of Ignite UI for Angular in 2021 - Ignite UI for Angular 12.1.0! In the past two months we have focused our efforts in developing new Angular components, addressing feature requests and enhancements logged in our GitHub repository by you. Being the best Angular UI toolkit takes continuous improvement efforts, which is our top priority. Let’s see what we’ve prepared for you with this release. Improved Angular Docs Look and Feel Well-structured documentation enables better customer experiences through cognitive ease, which refers to documentation that is easy to read and intuitive to navigate. We believe that a proper document structure makes a huge impact on the customer experience, and it can also help unblock users quickly and encourage them to use the product more effectively.These are the two main points that we covered with one of the latest documentation releases for Ignite UI:• Fast & Precise access to relevant information - a new global search that makes everything less than a second away. Optimizing information accessibility and readability is one of our top priorities.• Enhanced Navigation Structure - We've improved our page load time and added a clear navigation structure that helps our readers locate information quickly. No more flickers on page changing and internal link navigation - everything is fluent and without unnecessary page re-loads. Angular Components Angular Accordion Component The Angular Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page. It offers keyboard navigation and API to control the underlying panels' expansion state. Angular Pagination Component Pagination allows us to divide a set of data into a number of similar pages. This method of pagination is particularly well-suited for large data-sets and "infinite" scrolling user interfaces, hence why the paginator is typically used with a list of items or data table. The Pagination component enables the user to select a specific page from a range of pages and to determine how many records should see on each page. In order to showcase the Pagination Component in non-grid context we've exposed a demo using our igx-card component with paging capabilities. Angular Date Times support Japanese Full-Width Numbers The Angular Editors now support IME input. When typing in an Asian language input, the control will display input method compositions and candidate lists directly in the control’s editing area, and immediately re-flow surrounding text as the composition ends. Angular Date and Time Picker Sample In a response to a question from one of our users, we have added a sample for using Angular Date Picker and Time Picker together. When they are bound to one and the same Date object value, you can get both of them working together as a Date and Time Picker Component. Angular Grids: Grid, Tree Grid and Hierarchical Grid Update of Grid Export to Excel Service It is now possible to export Grid with defined multi-column headers. All headers will be reflected in the exported Excel file as they are displayed in the Grid. Add a Column input or passing additional data/state in the template contexts of the column We have added a new input property on the column component which allows users to pass additional properties in the template context objects of the column itself like cell, header, editing, etc. Add a new cell-like object API for the Angular data grids Ignite UI for Angular Grid component provides a great data manipulation capabilities and powerful API for Angular CRUD operations. By default the Grid is using in cell editing and different editors will be shown based on the column data type, thanks to the default cell editing template. In addition, you can define your own custom templates for update-data actions and to override the default behavior for confirming and discarding any changes. Add Grouping Pipe and Group Area for Angular Tree Grid The tree grid grouping pipe groups the data based on the provided parameters and the resulting hierarchy is displayed in a separate column. The pipe can also calculate aggregated values for the generated parent rows if aggregations are provided. Add a batch editing input to Angular Grid Now the Batch Editing feature the Angular Grid is available through an input. Angular Grid Localization Ignite UI for Angular i18n package comes with 10 new languages! Currently, Ignite UI for Angular ships with resource strings for the following languages and scripts: Bulgarian Czech Danish Dutch French German Hungarian Italian Japanese Korean Polish Portuguese Romanian Spanish Swedish Turkish Traditional Chinese (zh-Hant) and Simplified Chinese (zh-Hans) These are available via the igniteui-angular-i18n package. With only a few lines of code, users can easily localize the strings in Ignite UI for Angular components. Here is the complete Ignite UI for Angular Change Log for 12.1.0 12.1.0 New Features Added IgxAccordion component A collection of vertically collapsible igx-expansion-panels that provide users with data and the ability to navigate through it in a compact manner. The control is not data bound and takes a declarative approach, giving users more control over what is being rendered. Exposed API to control the expansion state, easy-to-use keyboard navigation, option for nested accordions. Code example below: <igx-accordion> <igx-expansion-panel *ngFor="let panel of panels"> ... </igx-expansion-panel> </igx-accordion> For more information, check out the README, specification and official documentation igxGrid New additionalTemplateContext column input: <igx-column [additionalTemplateContext]="contextObject"> <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext"> {{ props }} </ng-template> </igx-column> IgxGrid, IgxTreeGrid, IgxHierarchicalGrid Added batchEditing - an Input property for controlling what type of transaction service is provided for the grid. Setting <igx-grid [batchEditing]="true"> is the same as providing [{ provide: IgxGridTransaction, useClass: IgxTransactionService }]. Deprecation - Providing a transaction service for the grid via providers: [IgxTransactionService] is now deprecated and will be removed in a future patch. Instead, use the new batchEditing property to control the grid's Transactions. <igx-grid #grid [data]="data" [batchEditing]="true"> ... </igx-grid> <button igxButton (click)="grid.transactions.undo">Undo</button> Breaking changes IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent are no longer exposed in the public API. Instead, a new class IgxGridCell replaces all of these. It is a facade class which exposes only the public API of the above mentioned. Automatic migration will change these imports with CellType, which is the interface implemented by IgxGridCell Behavioral changes getCellByKey, getCellByColumn, getCellByColumnVisibleIndex, row.cells, column.cells, grid.selectedCells now return an IgxGridCell the CellType interface. cell in IGridCellEventArgs is now CellType. IGridCellEventArgs are emitetd in cellClick, selected, contextMenu and doubleClick events. let-cell property in cell template is now CellType. getCellByColumnVisibleIndex is now deprecated and will be removed in next major version. Use getCellByKey, getCellByColumn instead. Transactions Added IgxFlatTransactionFactory - the singleton service instantiates a new TransactionService<Transaction, State> given a transaction type. Added IgxHierarchicalTransactionFactory - the singleton service instantiates a new HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState> given a transaction type. Toolbar Actions Exposed a new input property overlaySettings for all column actions (hiding | pinning | advanced filtering | exporter). Example below: <igx-grid-toolbar-actions> <igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsGlobal"></igx-grid-toolbar-pinning> <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding> </igx-grid-toolbar-actions> IgxPaginatorComponent Added paging and pagingDone events; paging event is cancellable and is emitted before pagination is performed, pagingDone event gives you information about the previous and the current page number and is not cancellable; Also IgxPageSizeSelectorComponent and IgxPageNavigationComponent are introduced and now the paginator components allows you to define a custom content, as it is shown in the example below: <igx-paginator #paginator> <igx-paginator-content> <igx-page-size></igx-page-size> <button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()">PREV</button> <span>Page {{paginator.page}} of {{paginator.totalPages}}</span> <button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()">NEXT</button> </igx-paginator-content> </igx-paginator> Exporters's columnExporting event now supports changing the index of the column in the exported file. this.excelExporterService.columnExporting.subscribe((col) => { if (col.field === 'Index') { col.columnIndex = 0; } }); IgxExcelExporterService Added support for exporting the grids' multi-column headers to Excel. By default, the multi-column headers would be exported but this behavior can be controlled by the ignoreMultiColumnHeaders option off the IgxExcelExporterOptions object. IgxDateTimeEditor, IgxMask, IgxDatePicker, IgxTimePicker, IgxDateRangePicker Added IME input support. When typing in an Asian language input, the control will display input method compositions and candidate lists directly in the control’s editing area, and immediately re-flow surrounding text as the composition ends. General IgxGridComponent The following properties are deprecated: paging perPage page totalPages isFirstPage isLastPage pageChange perPageChange pagingDone The following methods, also are deprecated: nextPage() previousPage() Breaking Change the following property has been removed paginationTemplate IgxPaginatorComponent Deprecated properties selectLabel and prepositionPage are now removed; Breaking Change - the following properties are removed pagerEnabled pagerHidden dropdownEnabled dropdownHidden IgxSnackbarComponent Deprecated property message is now removed; Breaking Change - the snackbarAnimationStarted and snackbarAnimationDone methods are now removed. The animationStarted and animationDone events now provide reference to the ToggleViewEventArgs interface as an argument and are emitted by the onOpened and onClosed events of the IgxToggleDirective. IgxToastComponent Deprecated property message is now removed; Breaking Change - The isVisibleChange event now provides reference to the ToggleViewEventArgs interface as an argument. Breaking Change - IgxOverlayService events are renamed as follows: onOpening -> opening onOpened -> opened onClosing -> closing onClosed -> closed onAppended -> contentAppended onAnimation -> animationStarting IgxMaskDirective Breaking Change - Deprecated property placeholder is now removed; Breaking Change - IgxMaskDirective events are renamed as follows: onValueChange -> valueChanged Breaking Change - IgxBannerComponent events are renamed as follows: onOpening -> opening onOpened -> opened onClosing -> closing onClosed -> closed IgxExpansionPanelComponent Breaking Change - IExpansionPanelEventArgs.panel - Deprecated event property panel is removed. Usе owner property to get a reference to the panel. Breaking Change - IgxExpansionPanelComponent events are renamed as follows: onCollapsed -> contentCollapsed onExpanded -> contentExpanded Breaking Change - IgxExpansionPanelHeaderComponent events are renamed as follows: onInteraction -> interaction Behavioral Change - Settings disabled property of IgxExpansionPanelHeaderComponent now makes the underlying header element not accessible via Tab navigation (via tabindex="-1") Feature - Added contentExpanding and contentCollapsing events, fired when the panel's content starts expanding or collapsing, resp. Both events can be canceled, preventing the toggle animation from firing and the collapsed property from changing: <igx-expansion-panel (contentExpanding)="handleExpandStart($event)" (contentCollapsing)="handleCollapseStart($event)"> ... </igx-expansion-panel> IgxBanner BannerEventArgs.banner - Deprecated. Usе owner property to get a reference to the banner. IgxDropDown Breaking Change - The dropdown items no longer takes focus unless allowItemsFocus is set to true. Breaking Change - The following events have been renamed as follows: onOpening -> opening onOpened -> opened onClosing -> closing onClosed -> closed onSelection -> selectionChanging IgxToggleDirective Breaking Change - The following events have been renamed as follows: onOpened -> opened onOpening -> opening onClosed -> closed onClosing -> closing onAppended -> appended IgxCombo Breaking Change - The following events have been renamed as follows: onSelectionChange -> selectionChanging onSearchInput -> searchInputUpdate onAddition -> addition onDataPreLoad -> dataPreLoad onOpening -> opening onOpened -> opened onClosing -> closing onClosed -> closed opened and closed event will emit with IBaseEventArgs. opening event will emit with CancelableBrowserEventArgs. Breaking Change - IComboSelectionChangeEventArgs is renamed to IComboSelectionChangingEventArgs IgxSelect opened and closed event will emit with IBaseEventArgs. opening event will emit with CancelableBrowserEventArgs. Breaking Change - The following events have been renamed as follows: onOpening -> opening onOpened -> opened onClosing -> closing onClosed -> closed onSelection -> selectionChanging IgxAutocomplete Breaking Change - The following events have been renamed as follows: onItemSelected -> selectionChanging Breaking Change - AutocompleteItemSelectionEventArgs is renamed to AutocompleteSelectionChangingEventArgs IgxDialog Breaking Change - The following events have been renamed as follows: onOpen -> opening onOpened -> opened onClose -> closing onClosed -> closed onLeftButtonSelect -> leftButtonSelect onRightButtonSelect -> rightButtonSelect IgxDropDown opened and closed event will emit with IBaseEventArgs. Themes Breaking Change - The $color property of the igx-action-strip-theme has been renamed as follows: $color -> $icon-color Wrap-Up As you can see, there are numerous updates to Ignite UI for Angular, ready for you to use. We are committed to providing you with the best Angular UI toolkit and continuously updating our components, grids, and features so they remain the fastest on the market. As we mentioned, some of our enhancements come from users like yourself through our GitHub repository. With this in mind, we are always open to suggestions and feedback – it’s what makes us grow and serve you better. 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.