Log in to like this post! Ignite UI for Angular 13.0.0 Release Radoslav Mirchev / Tuesday, November 23, 2021 Ignite UI for Angular 13 rounds out a year of Angular goodies released in 12.1 and 12.2! We are all excited about the long-awaited "100 per cent Ivy" Angular 13! As you may recall, Angular Ivy is the next-generation compilation and rendering pipeline from Google, which reduces the bundle size, loads faster in slower networks and is simple to use, Sass modules and more. 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 what we have included in the Ignite UI for Angular 13.0.0 release, with full support for Angular 13! With Ignite UI for Angular 13.0.0, we are supporting Ivy along with two new awesome Angular components: Angular Stepper and Angular Single Select Combo. Keep in mind that Angular 13 builds on a slew of new components and features we added throughout 2021 in Ignite UI Angular 12.1 and 12.2, including the Paginator and Accordion components, and features such as: Conditional row styling across all grids Updated styling capabilities in Dock Manager Add New Row at the top of the Grid(s) Multi-column Headers and Frozen Column Row in Export-to-Excel service Grouping Pipe and Group Area for Angular Tree Grid Localization for 19 new languages We’ve also updated the navigation structure of our Ignite UI for Angular documentation pages, making it fast and easy for you to navigate. It’s one part of our commitment to keep you up to date with the latest versions of frameworks, platforms, and technology. Get Ignite UI for Angular 13.0.0 now by running ng update igniteui-angular@13.0.0 in your project. We also have an update guide to help you on update your projects. Cloud-based WYSIWYG IDE + Angular If you are eager to start building your Angular applications with these new components and with the only cloud-based, drag-and-drop WYSIWYG IDE, App Builder, you can check the App Builder roadmap and see when they will be available in its toolbox. Important note. With Angular 13 comes the end of IE11 support and so Ignite UI for Angular 13.0.0 also ends IE11 support. Developers who still need to support IE11 users for existing projects can continue to use Ignite UI for Angular version 12. New with Ignite UI for Angular 13 Angular Stepper Component Angular Stepper is a highly customizable component that visualizes content as a process and shows its progress by dividing the content into successive steps. It appears as a vertical or horizontal line. Provided by the Ignite UI for Angular library, the Stepper component delivers a wizard-like workflow and multiple features like step validation, styling, orientation and keyboard navigation. Angular Single Selection Combo Component The Angular Single Selection Combo component is a modification of the ComboBox component, requested by our clients in Ignite UI for Angular GitHub, that allows for single selections. Single Selection Combo is an editable input that allows users to choose an option from a predefined list of items. The new component also provides filtering capabilities, selections of items, grouping and adding custom values to a dropdown list. It can be used as an alternative to the HTML select tag and has several out-of-the-box features such as data binding (local and remote), filtering, grouping, custom templates, custom values, and more. Here is the complete Ignite UI for Angular Change Log for 13.0.0 New Features Added IgxStepper component Highly customizable component that visualizes content as a process and shows its progress by dividing the content into chronological igx-steps. Exposed API to control features like step validation, styling, orientation, and easy-to-use keyboard navigation. Code example below: <igx-stepper> <igx-step *ngFor="let step of stepsData" > ... </igx-step> </igx-stepper> For more information, check out the README, specification and official documentation. Added IgxFocusTrap directive, which traps the Tab key focus within an element. <div #wrapper [igxFocusTrap]="true" tabindex="0"> <input type="text" placeholder="Enter Username" name="uname"> <input type="password" placeholder="Enter Password" name="psw"> <button>SIGN IN</button> </div> Added IgxSimpleComboComponent The igx-simple-combo which is a modification of the igx-combo component that allows single selection and has the appropriate UI and behavior for that. It inherits most of the igx-combo's API. Allows the selection of single items in a filterable list. Supports custom values, keyboard navigation, validation, customized positioning of the item list via overlay settings. Example: <igx-simple-combo [(ngModel)]="item" [allowCustomValues]="true" [placeholder]="'Search'" [data]="items"> <label igxLabel>Items</label> <igx-hint>Please select an item from the dropdown list.</igx-hint> </igx-simple-combo> IgxCsvExporterService, IgxExcelExporterService Exporter services are no longer required to be provided in the application since they are now injected on a root level. IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent Exposed new input buttonText which sets the text that is displayed inside the dropdown button in the toolbar. IgxCombo Added groupSortingDirection input, which allows you to set groups sorting order. IgxGrid, IgxTreeGrid, IgxHierarchicalGrid Added new directives for re-templating header sorting indicators - IgxSortHeaderIconDirective, IgxSortAscendingHeaderIconDirective and IgxSortDescendingHeaderIconDirective. IgxGrid Exposed a groupStrategy input that functions similarly to sortStrategy, allowing customization of the grouping behavior of the grid. Please, refer to the Group By topic for more information. IgxDialog Added focusTrap input to set whether the Tab key focus is trapped within the dialog when opened. Defaults to true. General IE discontinued support Breaking Change details web-animations-js is removed as Peer Dependency. Removed IE from .browserslistrc Removed IE related polyfills, like Importing ES7 polyfill for Object ('core-js/es7/object') for IE is no longer used. IgxDialog Breaking Change - The default positionSettings open/close animation has been changed to fadeIn/fadeOut. The open/close animation can be set through the position settings, e.g. change the animation to the previously default open/close animation: import { slideInBottom, slideOutTop } from 'igniteui-angular'; @ViewChild('alert', { static: true }) public alert: IgxDialogComponent; public newPositionSettings: PositionSettings = { openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }), closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)'} }) }; this.alert.positionSettings = this.newPositionSettings; igxGrid, igxHierarchicalGrid, igxTreeGrid Breaking Change - The following deprecated inputs have been removed Inputs showToolbar, toolbarTitle, columnHiding, columnHidingTitle, hiddenColumnsText, columnPinning, columnPinningTitle, pinnedColumnsText. Use IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent instead. Breaking Change - The rowSelected event is renamed to rowSelectionChanging to better reflect its function. Breaking Change - The columnSelected event is renamed to columnSelectionChanging to better reflect its function. Breaking Change - columnsCollection is removed. Use columns instead. If at certain ocasions columns return empty array, query the columns using ViewChildren and access those in ngAfterViewInit: @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent }) public columns: QueryList<IgxColumnComponent>; RowType, IgxRowDirective Breaking Change - rowData and rowID deprecated properties are now removed. Use data and key instead. Use ng update for automatic migration. igxRowSelector rowID in the context object of the igxRowSelector is now deprecated and will be removed in future version. Use key property instead: <igx-grid [data]="data", [rowSelection]="'multiple'" primaryKey="ID"> <igx-column field="Name"></igx-column> <igx-column field="Age"></igx-column> <ng-template igxRowSelector let-rowContext> <span>{{ rowContext.key }}</span> </ng-template> </igx-grid> IgxColumnActionsComponent Breaking Change - Input columns has been removed. Use igxGrid columns input instead. IgxCarousel Breaking Changes - The carousel animation type CarouselAnimationType is renamed to HorizontalAnimationType. Theming Breaking Change - Changed CSS palette variables from HEX values to a list of H, S, L comma-separated values, which requires the use of the CSS hsl function when accessing these values directly. .bozo { background: hsl(var(--igx-surface-500)); } Wrap-Up We continue to incrementally ship new features, performance, and stability improvements as we are committed to provide you the best Angular UI toolkit and develop the best app builder platform - Indigo.Design. 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. Last but not least we know that predictability and visibility on our next goals is critical for the good business partners so we have our roadmap always up to date! 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.