Log in to like this post! Ignite UI for Angular 12.0.0 Release Radoslav Mirchev / Friday, May 14, 2021 Just in time for Angular 12, it’s Ignite UI 12.0.0! We are all excited about the release of Angular 12 and the new features that it supports. At Infragistics, we strive to provide you with the best possible user experience and keep you up-to-date with the latest versions of frameworks, platforms, and technology. That is why we are excited to share that we have released Ignite UI for Angular 12.0.0 , with full support for Angular 12, so quickly after its release! To be the best Angular enterprise-grade library takes continues efforts and devotion. Ignite UI 12.0.0 is proof for that. We continue to add new components and features, enhance the existing ones and address your requests, letting you creating Angular application at ease. Let's see what do we have for you in Ignite UI 12.0.0: Angular Components Angular Tree Component The Angular Tree Component allows users to represent hierarchical data in a tree-view structure, maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model. Its primary purpose is to allow end-users to visualize and navigate within hierarchical data structures. The Ignite UI for Angular Tree Component also provides load on demand capabilities, item activation, bi-state and cascading selection of items through built-in checkboxes, built-in keyboard navigation and more. Angular Date Picker & Angular Time Picker Update As mentioned above, keeping the top position for enterprise-grade Angular library, obligates us to continuously improve our product. In Ignite UI 12.0.0 you can enjoy on enhanced user experience with updated Angular Date Picker and Angular Time Picker components. You can find more in Ignite UI documentation. Angular Date Time Editor We have added new feature to our Angular Date Time Editor. Now it accepts ISO 8601 date strings. Find more here. Design & Theming Ignite UI for Angular would not be complete without our state-of-art design and theming. Ignite UI 12.0.0 comes with reduced themes size, global palette values and new "How to..." topics. Check out the updated "Styling & Themes" documentation. Reduced themes size Use of global palette values (CSS variables) Scope custom CSS properties to component selectors Expose elevations as custom CSS properties Typography to be explicitly set by the user New Bootstrap Theming Sample Angular Grids: Grid, Tree Grid and Hierarchical Grid Export Angular Hierarchical Grid to Excel The Excel Exporter service now can export data to excel from the Ignite UI Angular Hierarchical Grid. The data export functionality is encapsulated in the IgxExcelExporterService class. To trigger the process, you need to invoke the IgxExcelExporterService's export method and pass the IgxHierarchicalGrid component as the first argument. Datetime & Time Column Types We add two new members to our Angular Column Data Types portfolio. The appearance of the date portions will be set (e.g. day, month, year) based on locale format or pipeArgs input. The pipe arguments can be used to specify a custom date format or timezone. Angular Tabs & Angular Bottom Navigation Refactoring Another two angular components that have been updated and changed in Ignite UI 12.0.0. Expose API for a new row object in Angular Grid The Grid provides a convenient way to perform data manipulations through inline row adding and a powerful API for Angular CRUD operations. Add an Action Strip component with editing actions enabled in the grid's template, hover a row and use the provided button or press ALT + + to spawn the row adding UI. Angular Grid Interactions Detach method for IgxOverlay Here it is the complete Ignite UI for Angular Change Log for 12.0.0 General IgxGrid, IgxTreeGrid, IgxHierarchicalGrid Breaking Change - The locale and pipeArgs parameters are removed from the operate method exposed by the IgxNumberSummaryOperand, IgxDateSummaryOperand, IgxCurrencySummaryOperand and IgxPercentSummaryOperand. They are now set in the igx-grid-summary-cell template. To change the locale and format setting of the igx-grid-summary-cell the user can use the new summaryFormatter property of the IgxColumnComponent. Breaking Change - IgxGrid, IgxTreeGrid, IgxHierarchicalGrid events are renamed as follows: onCellClick -> cellClick onScroll -> gridScroll onSelection -> selected onRowSelectionChange -> rowSelected onColumnSelectionChange -> columnSelected onColumnPinning -> columnPin onColumnInit -> columnInit onSortingDone -> sortingDone onFilteringDone -> filteringDone onPagingDone -> pagingDone onRowAdded -> rowAdded onRowDeleted -> rowDeleted onColumnResized -> columnResized onContextMenu -> contextMenu onDoubleClick -> doubleClick onColumnVisibilityChanged -> columnVisibilityChanged onColumnMovingStart -> columnMovingStart onColumnMoving -> columnMoving onColumnMovingEnd -> columnMovingEnd onGridKeydown -> gridKeydown onRowDragStart -> rowDragStart onRowDragEnd -> rowDragEnd onGridCopy -> gridCopy onRowToggle -> rowToggle onRowPinning -> rowPinning onToolbarExporting -> toolbarExporting onRangeSelection -> rangeSelected IgxGridRowComponent, IgxGridGroupByRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent are no longer exposed in the public API. Automatic migration will change these imports with RowType. Behavioral changes getRowByIndex, getRowByKey, cell.row now return an object implemening the RowType interface. dragData emitted with IRowDragEndEventArgs, IRowDragStartEventArgs is now RowType IRowDragEndEventArgs, IRowDragStartEventArgs now emit dragElement, which holds the dragged row html element. row in IPinRowEventArgs is now RowType IgxTabs, IgxBottomNav Breaking Change - IgxTabs and IgxBottomNav components were completely refactored in order to provide more flexible and descriptive way to define tab headers and contents. Please make sure to update via ng update in order to migrate the existing igx-tabs and igx-bottom-nav definitions to the new ones. IgxForOfDirective Breaking Change - IgxForOfDirective events are renamed as follows: onChunkLoad -> chunkLoad onScrollbarVisibilityChanged -> scrollbarVisibilityChanged onContentSizeChange -> contentSizeChange onDataChanged -> dataChanged onBeforeViewDestroyed -> beforeViewDestroyed onChunkPreload -> chunkPreload onDataChanging -> dataChanging IgxColumnComponent Breaking Change - The onColumnChange output is renamed to columnChange. Breaking Change - IgxHierarchicalGrid and igxRowIsland events are renamed as follows: onGridCreated -> gridCreated onGridInitialized -> gridInitialized onDataPreLoad -> dataPreLoad IgxDateTimeEditor Feature - value accepts ISO 8601 string format. Breaking Change - value type could be Date or string. Breaking Change - onValueChange event is renamed to valueChange. Breaking Change - isSpinLoop property is renamed to spinLoop. Feature - spinDelta input property which allows a user to provide different delta values that will be used for spinning. All parts default to 1. increment and decrement methods now accept an optional delta parameter which targets the currently spun date portion. It takes precedence over the values set in spinDelta. IgxDatePicker Feature - value accepts ISO 8601 string format. Feature - The actions template now exposes the Calendar component as implicit context: <igx-date-picker> <ng-template igxPickerActions let-calendar> <button igxButton="flat" (click)="calendar.viewDate = today">Today</button> </ng-template> </igx-date-picker> Breaking Change - value type could be Date or string. Breaking Change - onSelection event is renamed to valueChange. Breaking Change - new way to define custom elements in the igx-date-picker while the following properties are deleted or deprecated: formatter, context, labelInternal, template. <igx-date-picker #datePicker [(value)]="date" [displayFormat]="'longDate'" [inputFormat]="dd/MM/yyyy"> <label igxLabel>Date: </label> <igx-picker-toggle igxPrefix (click)="datePicker.toggle()"> calendar_view_day </igx-picker-toggle> <igx-picker-clear igxSuffix (click)="datePicker.clear()"> delete </igx-picker-clear> </igx-date-picker> Breaking Change - mode and format are replaced by inputFormat. Breaking Change - placeholder defaults to the inputFormat Breaking Change - editorTabIndex is renamed to tabIndex. Breaking Change - monthsViewNumber is renamed to displayMonthsCount. Breaking Change - vertical is renamed to headerOrientation. Breaking Change - displayData is renamed to displayFormat. Breaking Change - dropDownOverlaySettings and modalOverlaySettings are replaced by the overlaySettings. Breaking Change - onValidationFailed event is renamed to validationFailed. Breaking Change - onDisabledDate event is removed. Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed. IgxTimePicker Feature - value accepts ISO 8601 string format. Breaking Change - value type could be Date or string. Breaking Change - onValueChanged event is renamed to valueChange. Breaking Change - new way to define custom elements in the igx-time-picker while the following properties are deleted or deprecated: context, promptChar, displayTime, template. <igx-time-picker #timePicker [(value)]="time" [displayFormat]="'mediumTime'" [inputFormat]="hh:mm:ss"> <label igxLabel>Time: </label> <igx-picker-toggle igxPrefix (click)="timePicker.toggle()"> alarm </igx-picker-toggle> <igx-picker-clear igxSuffix (click)="timePicker.clear()"> delete </igx-picker-clear> </igx-time-picker> Breaking Change - format is replaced by inputFormat. Breaking Change - placeholder defaults to the inputFormat Breaking Change - isSpinLoop property is renamed to spinLoop. Breaking Change - vertical is renamed to headerOrientation. Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed. Breaking Change - onValidationFailed event is renamed to validationFailed. IgxDateRangePicker Feature - value start and end accept ISO 8601 string format. Feature - The actions template now exposes the Calendar component as implicit context: <igx-date-range-picker> <ng-template igxPickerActions let-calendar> <button igxButton="flat" (click)="calendar.viewDate = today">Today</button> </ng-template> </igx-date-range-picker> Breaking Change - value start and end types could be Date or string. Breaking Change - rangeSelected event is renamed to valueChange. Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed. Breaking Change - monthsViewNumber is renamed to displayMonthsCount. IgxSliderComponent Breaking Change - The following outputs are renamed: onValueChange to valueChange onValueChanged to dragFinished IgxCircularProgressBarComponent Breaking Change - The following outputs are renamed: onProgressChanged to progressChanged IgxLinearProgressBarComponent Breaking Change - The following outputs are renamed: onProgressChanged to progressChanged IgxToast Breaking Change - The following deprecated methods and outputs have been removed Outputs showing, shown, hiding, hidden. Use onOpening, onOpened, onClosing, onClosed instead. Methods show, hide. Use open, close instead. IgxSnackbar Breaking Change - The following deprecated methods have been removed show, hide. Use open, close instead. New Features Added IgxTree component Allows users to render hierarchical data in an easy-to-navigate way. The control is not data bound and takes a declarative approach, giving users more control over what is being rendered. Features API for handling selection (bi-state and cascading), node activation, node expansion state. Features extensive and easy-to-use keyboard navigation, fully compliant with W3 standards. Code example for a tree contructured from a hierarchical data set: <igx-tree> <igx-tree-node *ngFor="let node of data" [data]="node" [expanded]="isNodeExpanded(node)" [selected]="isNodeSelected(node)"> {{ node.text }} <img [src]="node.image" alt="node.imageAlt" /> <igx-tree-node *ngFor="let child of node.children" [data]="child" [expanded]="isNodeExpanded(child)" [selected]="isNodeSelected(child)"> {{ child.text }} <igx-tree-node *ngFor="let leafChild of child.children" [data]="leafChild" [expanded]="isNodeExpanded(leafChild)" [selected]="isNodeSelected(leafChild)"> <a igxTreeNodeLink href="{{leafChild.location}}" target="_blank">{{ leafChild.text }}</a> </igx-tree-node> </igx-tree-node> </igx-tree-node> </igx-tree> For more information, check out the README, specification and official documentation IgxHierarchicalGrid Added support for exporting hierarchical data. IgxForOf, IgxGrid, IgxTreeGrid, IgxHierarchicalGrid Behavioral Change - Virtual containers now scroll smoothly when using the mouse wheel(s) to scroll them horizontally or vertically. This behavior more closely resembles the scrolling behavior of non-virtualized containers in most modern browsers. IgxGrid, IgxTreeGrid, IgxHierarchicalGrid The IgxRowAddTextDirective allows to customize the text of the row adding overlay. <igx-grid [rowEditable]="true"> <ng-template igxRowAddText> Adding Row </ng-template> </igx-grid> A new summaryFormatter input property is exposed by the IgxColumnComponent, which is used to format the displayed summary values for the columns. public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { const result = summary.summaryResult; if(summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count' && result !== null && result !== undefined) { const pipe = new DatePipe('en-US'); return pipe.transform(result,'MMM YYYY'); } return result; } <igx-column field="OrderDate" header="Order Date" [sortable]="true" [disableHiding]="true" [dataType]="'date'" [hasSummary]="true" [summaryFormatter]="dateSummaryFormat"> </igx-column> Two new column types are introduced dateTime and time. In order to operate with them is necessary to set the column property dataType to 'dateTime' or 'time'. <igx-column field="OrderDate" header="Order Date" [dataType]="'dateTime'" > </igx-column> <igx-column field="ClosingTime" header="Closing time" [dataType]="'time'" > </igx-column> Behavioral Change - Column Autosize feature now does not handle templated headers where the first level children are sized based on parent like default div and etc. Autosizing for such headers will not result in change. Behavioral Change - Calling autosize through the IgxColumnComponent API now takes into consideration the minWidth and maxWidth of the column. A new IgxColumnComponent input property is exposed called autosizeHeader, which if false, allows the autosizing to ignore the header cell and autosize only based on content cells. IgxTabs The tabAlignment property of the IgxTabs component replaces the type property and enables you to set the tab alignment to start, center, end and justify. The igx-tab-header supports igx-prefix and igx-suffix directives in its ng-content. IgxBottomNav The IgxBottomNav component exposes disableAnimations property which determines whether the contents should animate when switching the selected item. The property is set to true by default which means that the animations are disabled. IgxOverlayService detach and detachAll methods are added to IgxOverlayService. Calling detach will remove all the elements generated for the related overlay, as well as clean up all related resources. Calling detachAll will remove all elements generated by any call to IgxOverlay attach, and will clean up all related resources. Note: calling hide or hideAll will not clean generated by the service elements and will not clean up related resources. IgxCombo Any changes to IComboItemAdditionEvent.addedItem will be reflected in the item added to the data. IgxComboComponent.onAddition is now cancelable. You can prevent the item from being added by setting the event args cancel property to true. public handleComboItemAddition(event: IComboItemAdditionEvent): void { if (event.addedItem[this.combo.valueKey] === 'ForbiddenValue') { event.cancel = true; } else if (event.addedItem[this.combo.valueKey] === 'Change Me') { const index = this.iter++; event.addedItem = { [this.combo.valueKey]: `customId${index}`, [this.combo.displayKey]: `New item ${index}`; } } } Themes: Breaking Changes: IgxButton theme has been simplified. The number of theme params (igx-button-theme) has been reduced significantly and no longer includes prefixed parameters (flat-*, raised-*, etc.). See the migration guide to update existing button themes. Updates performed with ng update will migrate existing button themes but some additional tweaking may be required to account for the abscense of prefixed params. The igx-typography mixin is no longer implicitly included with igx-core. To use our typography styles users have to include the mixin explicitly: @include igx-core(); /// Example with Indigo Design theme: @include igx-typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale); 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.