Blog Developers

Ignite UI for Angular 9.1.0 Release

Radoslav Mirchev / Tuesday, June 2, 2020

Newest Release of Ignite UI for Angular—Version 9.1 

While we have the most complete set of enterprise-grade, Angular-native components on the market, we continue to listen to you and we follow trends in the market.  In our latest release, Ignite UI for Angular version 9.1, we’ve not only made the fastest data grid and charts, faster, we’ve also made it easier to work with data and visualize it with one click—while keeping everything customizable and visually appealing.   

In addition, we’ve added components for layout, actions management, and date/time management as well as a handful of great sample applications, theming and directives for convenience. We’ll discuss these in this blog, but I wanted to call out two new components that are major advancements in our journey to web modernization: 

This powerful new tool makes it easier for you to build multi-window, multi-screen apps in any framework. Take complex layouts and split them into smaller, easier-to-manage panes. Infragistics' Dock Manager offers a complete windowing experience, just like the desktop, but in the web. Example from the Dock Manager and Data Analysis Tool Sample application:

We’ve made it easier for you to improve usability, accessibility and ARIA compliance with the new Grid Keyboard Navigation. Navigate web pages using only a keyboard by reducing the number of tab stops and exposing new keyboard shortcuts. Also known as Active Element Navigation, this control makes it easier to improve usability and ensure accessibility for all users, regardless of how they are navigating pages. 

Now let’s dive into some of the details. 

Range Date Picker  

We’ve now added the Igx Date Range Picker component to our existing calendar and date editor. This new component allows you to select a range of dates from a calendar UI or editable input fields. It is a “must have” for every booking or scheduling application scenario. The component also provides an advanced setup exposing two editable input fields. You can find more details here. 

Keyboard Navigation Enhancement 

As we mentioned above briefly, our new Grid Keyboard Navigation adds new functionality to our Ignite UI for Angular keyboard navigation. Keyboard navigation is tricky: on the one hand the more complex the product become, the more complex the navigation becomes. On the other hand, we like to keep things simple. That is why we have enhanced our keyboard navigation with a new user interface pattern, or “active element navigation", which is lightweight, and offers better ARIA support - no focus trap, reduced number of tab stops, better grid performance and new features integration. 

Modern web pages and applications are managed as a collection of standalone components and may contain hundreds of tab stops. According Fundamental Keyboard Navigation Conventions section of W3C’s WAI-ARIA Authoring Practices 1.1, the tab sequence should include only one focusable element of a Composite UI Component. You can see the contradiction, aren’t you?  We found a way to keep both the optimal user experience and the WAI-ARIA guidance. We have organized the grid in five such Composite UI Component, hence five tab stops: 

  • Toolbar/ Group by Area if existing 
  • Header row container. The first cell of the header row will become active. 
  • Tbody. The first igxCell(0,0) of the body container will become active.  
  • The first cell in the Column Summary will become active (if summaries are enabled). 
  • Pager UI. Items per page drop-down will become active. 

Well I only scratch the surface of the topic, but for the detailed description you could visit the blog post on the topic. 

That brings along changes on Tab navigation behavior: 

  • You cannot use `tab` key to navigate between the cells in the IgxGrid. The navigation is performed only with arrow keys.  
  • With `tab` key you can only navigate to the next editable cell (Only when the cell is in edit mode). When the last editable cell (of the row) is reached, the navigation will continue to next row's editable cell. If the last editable cell is reached, the tab navigation will continue with the next focusable tab stop element.  

As it comes to performance, removing cell focus and blur handlers and reducing navigation services gives a boost to the grid overall performance. Again more details and metrics you can find in the What's new: Grid Keyboard Navigation with Richer ARIA Compliance blog post or in our documentation. 

For a more in-depth look at this exciting component, read our Grid Keyboard Navigation blog. 

Header Navigation Implementation

 In concert with enhancements to "active element navigation", header keyboard navigation is now fully functional. The full list of key combinations are here. 

 

Splitter 

The Ignite UI for Angular Splitter component provides the ability to create layouts, split into multiple, vertically or horizontally arranged panes that may be resized, expanded, and collapsed. These interactions are performed through by exposing the UI exposed in the splitter bars between the panes. Code snippets and documentation are here. 

 

Row Pinning 

Row Pinning is not a feature that you see everyday in an angular grid. Pinning a row is another feature that makes working with data easier. It is enabled in both directions - top or bottom. Once a row is pinned, it remains in the Tbody of the grid as a ghost row. The ghost row is a not editable copy of a pinned one that appears in its original place in the scrollable area of the grid. Full documentation for the row pinning is here. 

 

Action Strip Component 

 As mentioned earlier the Ignite UI for Angular product is becoming more complex and feature rich. That comes with difficult decisions how to make user friendly UI and still to have "copy", "paste", "edit", "pin", "share", "delete" and others actions visible and not overwhelming your screen. The igx-action-strip provides a template area for one or more actions. It is highly flexible and customizable. It can be instanced on a cell, on a row or just on any container. It comes as a container, overlaying its parent  and displaying action buttons om mouse over event, but it can be configured as a drop down menu or even combined approach where primary actions will show as an icon for ease of access, while all secondary actions are listed in a drop-down. You can find all the details in the Action Strip topic. 

Action strip component instanced in a container:

Drop-down menu option:

Action strip component in a row context of a grid:

 

Column Freezing/Pinning on the Right  

Column freezing is not a unicorn as the row pinning. However, pinning on the left (start) side is the most common approach. Now we have the option for Column freezing/Pinning on the right (end)[link] which provides you with more layout options for your application. Column pinning topic is updated with the Pinning Position section. 

 

Column Selection 

Column Selection is another feature that is unique for Ignite UI for Angular. Working on DAT (Data Analysis Tool) we realized that selecting entire column with a single click is a must. It emphasizes the importance of a particular column by focusing the header cell(s) and everything below. The feature comes with a rich API that allows for manipulation of the selection state and data extraction. More details are available in the documentation topic. 

 

RTL Support Enhancements  

Providing full RTL support for all our components is a big and important project for Ignite UI. To Do list is shrinking with every major release. In 9.1 we are removing Circular Progress Indicator and Slider from that list. Additional information could find in the RTL support documentation.  

Angular Schematics 9.1.510 & Ignite UI CLI 5.1.0 

With Ignite UI for Angular 9.1.0, we released the Ignite UI CLI 5.1.0 together with @igniteui/angular-schematics version 9.1.510. This updates includes changes to the Angular templates and also new functionality related to the new licensed package. In addition, we have created two blogs that will help you use the capabilities that our schematics and CLI expose, and understand the way we that have created them.  

Furthermore I would like to point out that Angular 9.0.0, we released the Ignite UI CLI 5.0.0 as well, the tool that helps you to easily scaffold projects in Angular, React and jQuery. Our CLI project has split into 4 more purposeful packages: igniteui-cli, @igniteui/cli-core, @igniteui/angular-templates and @igniteui/angular-schematics. The Ignite UI schematics are integrated in the Ignite UI for Angular product and helps you add it to a project created with Angular CLI and add components from our bundle. Please read more about this in the Angular Schematics and Ignite UI CLI topics and in the changelog of version 5.0.0.  

You can always refer to our Angular Schematics and Ignite UI CLI topics or review the updates we’ve made. 

 

Styling & Theming 

Styling and theming is an essential part of our product. We had invested considerable time and effort to refactor the design of our samples. At the end we have 35 updated samples on our samples browser.  

  • Legacy support for CSS variable - now igx-legacy-support is set to “false” by default. This will allow styling of components without the need to use Sass in your project. However, if you are to include support for IE11 you should set it to “true”. 
  • Scrollbars theming - Small, insignificant enhancement at first glance but noticeable final touch to Ignite UI theming. Having default scrollbars while switching between light and dark theme could take your eyes out and it is quite annoying. Take that example, the difference is noticeable: 

 

Task Manager Sample Application 

We have a new sample application for you. It is created to demonstrate the editing capabilities of the IgxGrid and as a show case for real life scenario application. In fact, it turned out to be very capable tool for managing tasks which I myself started to use. Next step in the development is to add option for integration with GitHub and add some more features. 

 

 

COVID-19 Dashboard Application 

COVID-19 Dashboard has started as an internal exercise. There is a hot topic that everyone should follow. You see new dashboards popping up every day and we have the controls - what would be the effort to build up, such a board from the scratch? And the result was amazing, it took merely several hours to have the COVID-19 Dashboard ready. Well, visual design and styling took a bit more, but design is always subjective topic. You could follow Hristo, step by step in building the dashboard in his blog post: How to Create an Angular Covid-19 Dashboard in Hours. 

 

Dock Manager & Data Analysis Sample App 

The Data Analysis Sample application is not a new one. It was part of our Ignite UI 9.0 release. At the time when we started working on its design, however, we had one major obstacle – we were limited by the browser. We wished to have the desktop experience of multi- window layout and with the release of the Infragistics Dock Manager our wish came true. Now we have everything a complete feature set– pane navigator, docking, floating panes, pinning, and tab groups... The combination of between Dock Manager and DAT (Data Analysis Tool) results in a one beautiful and powerful sample application. 

 

Settable Igx-grid Header Title 

One little feature that could save you a lot of irritation. Developing real life scenario application with our own product is real dogfooding. It makes you to realize that simple things like setting the header title different from the “header” value could really get your goat. With Ignite UI 9.1 this issue is resolved. Now you could set independently header and title value. You could find the details in our git repository.   

Combo Update 

Here the new feature is directed to the user experience on mobile devices. Currently when combo's list of items is opened, the control automatically puts the focus on the search input. For mobile users this will cause a keyboard to show, making scrolling through the list of items more tedious. We have added an optional input to solve that issue. You can find more details here. 

Directives 

Date Time Editor 

The Ignite UI for Angular Date Time Editor Directive allows the user to set and edit the date and time in a chosen input element. The user can edit the date or time portion, using an editable masked input. Additionally, one can specify a desired display and input format, as well as min and max values to utilize validation. In the topic you can find more details on the implementation. 

Final Thoughts and Resources 

As you can see, we’ve added a lot of new features and components in Ignite UI for Angular 9.1, including components for layout, action management, and date/time management as well as a handful of great sample applications, theming and directives for convenience. 

We offer an Angular toolkit with the most depth and breadth in the industry, including Angular-native components and enterprise-grade. And we are responsive to your needs, continually listening and enhancing Ignite UI for Angular. 

But at Infragistics we consider that just releasing the best of breed UI components is not enough. We also would like to share with you why we are proud of our work. One way we highlight our additional value is through regular blogs that offer you useful tips and tricks, deeper insights, how-to's, and much more. Here are a few of the Angular-related blogs that you might find useful: 

Topic of the blog is how to build an Angular application with Ignite UI For Angular, implementing full CRUD (Create, Read, Update, Delete) operations against an OData RESTful API, created with API Server. You can find how to: 

  • Go through the API Server installation and setup. 
  • Build a REST API from the local SQL instance of Northwind database 
  • Consume and visualize the data in an Angular application built with Ignite UI for Angular 
  • Demonstrate how to add full CRUD capabilities to the igxGrid to consume the API 

You can find more about our open source Angular component library and Angular schematics. How to enjoy their benefits from running a simple ng new to creating complex schematics that automate workflow and project setup 

Three minutes read how to get advantage of Ignite UI CLI and schematics in a few simple steps. The only prerequisites that you need are NodeJS and Angular CLI. 

 

Keyboard navigation, improving usability, accessibility, Active element navigation... I will say no more on that topic and let you to dive in yourselves. 

You want to build viable web application just in hours with Ignite UI for Angular? That blog is for you, then. We are taking the journey of developing functional and visually appealing dashboard from the scratch.  

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