Ignite UI for Angular 9.0.0 Release

Angular 9 is out and Ignite UI 9.0.0. is also here!

We keep you up to date with the newest technology in the modern web and we are not coming empty-handed! We have combined the dependencies update to Angular 9 with a major feature release. During the last few months we have focused on a few key things — working with data, customization and theming. You will see how easy it is to work with data, visualize it with one click and yet keep everything customizable and cool looking, just by using Ignite UI. 

Here is what we have for you:

Data Analysis Sample

We offer both the most complete UI toolset on the market for Angular developers and a rich chart collection. Each of them is great on their own but combining them, it is a masterpiece. So we have combined them.

Reading raw data, and finding meaningful patterns in it, is an evergreen hot topic. There is a desire to perform data analysis by making adjustments on the fly or by just highlighting a specific group of data, not the complete data set. The Ignite UI Data Analysis Sample is a marvelous showcase for one click-data analysis on selected data. Simple and powerful, it combines charts, text formatting and more to come.

Do you want to test it? Sample and detailed description.

Angular Slider with Tick Marks Update

Slider tick marks provide a new and more appealing way for data visualization, like a particular timeframe, days of the week and more. With this new functionality, you are not obliged to interact with the Angular Slider in order to see what data range is being represented. It is extremely flexible, with regards to the control over positioning and orientation of the tick marks and tick labels. You can turn the ticks on or off, and you can toggle between primary, secondary or both. In addition, this feature provides a way to turn on/of primary, secondary tick labels or both. Tick labels can change their rotation form horizontal to vertical (top to bottom (90) or bottom to top (-90)). 

Master-Detail Style Visualization

The ability to include grids within grids is also known as Master-Detail grid. In our newest update, the Ignite UI igxGrid component supports specifying a detail template that displays additional details for a particular row by expanding/collapsing its content. When specified, each record acts as a master and upon expansion shows a customizable details template with contextual data for the current record.

This mode comes in very handy when you need to display master-detail data in a hierarchical structure and in a flat grid. 

Carousel Enhancements

We already have a good carousel component in Ignite UI but we have decided to make it a great component. We have added everything that you had requested and more — animations, templatable buttons and indicators, pan interactions and the integration of other components. You can find the full description here.

Container Instance for Excel-Style Filtering and Advanced Filtering

Having awesome filter components is not always enough. Depending on the implementation or business use case, you may need additional customization. Here is an example of what you can now do with a filter menu in a container instance using our advanced filtering: 

Footer Element

Currently, there are no default header and footer templates for the igxSelect component. Now, however, you can define your own header alone or include a footer template and mark it respectively with IgxSelectHeaderDirective or IgxSelectFooterDirective. As these are custom templates, you should define the styling as well.

In this example, there are both header and footer ng-templates defined. In the header there is a basic filtering implemented via igx-buttongroup. The footer includes a static summary of all of the items based on a delivery method.

Access All Data When Calculating Summary Per Column

Now you can access all grid data inside the custom column summary. Two additional optional parameters are introduced in the IgxSummaryOperand operate method. You can find the code snippet and more details here.

Collapsible Column Groups Feature

Multi-column headers allow you to have multiple levels of nested columns and column groups and they let you mark each column group as collapsible. Collapsible multi-column headers make it possible to collapse and expand — to show and hide the nested headers under the current one — which will give you shortened or summarized information for the example.

Directives 

Grid State Persistence Available 'Out of the Box'

One of most common request we receive from you is to have the inclusion of state persistence with Ignite UI. While it has been available, it was not out of the box and it required strong knowledge of the API to achieve it. Now, without adding a single line of new code — only using the API — you have it wrapped in a directive, ready to be used out of the box.  

The Ignite UI for Angular Grid component provides the IgxGridState directive which allows developers to easily save and restore the grid state. When the IgxGridState directive is applied on the grid, it exposes the getState and setState method, that developers can use to achieve state persistence in any scenario.

Drag Ghost Directive for Custom Row in Grid

The drag ghost can be templated using the IgxRowDragGhost directive, applied to a <ng-template> inside of the igx-grid's body:

Theming

Theming Widget

Last but not least, we are very happy to announce our Theming widget. Now, you are able to change themes at runtime in the Ignite UI sample browser with just one click. Theming widget allows you to change styles, colors, base typeface, roundness and elevation. Customization of theming has never been easier. Once you are ready with your theme, just press "DOWNLOAD SASS" and you have your SCSS file at your disposal. If you want to try it, visit Ignite UI Angular Samples and start theming.

Bootstrap Theme

Yes, you really noticed that "Bootstrap" theme is already available for Ignite UI. Since version 9.0 our components support the new theme that is built based on bootstrap 4.
In order to switch from default to bootstrap, you have to use one of the newly created mixins and palettes, like this:

We are constantly striving to create an effortless experience for you, and I would like to quote the WP Carey School of Business, which expresses this concept beautifully: “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.”

---

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. If you are curious on what is coming next, you can always check our Roadmap board and file in GIT We will give our best to constantly improve our product experience to suits all your needs and build apps with ease.