Ignite UI for Angular 16.1.0: What's New?

Ignite UI for Angular is constantly evolving to improve developers’ experience. With the Ignite UI for Angular 16.1.0 Release, we do exactly that – offering better app building processes but also standardizing the UX across all of our modern UI component frameworks, including Ignite UI for Angular, Ignite UI for Web Components, and Ignite UI for Blazor. 

Try Ignite UI for Angular

The New Ignite UI Component Sizing (Preview Release) – Now What...

Ignite UI for Angular 16.1.0 introduces a new way to size components with the goal of replacing the existing DisplayDensityToken and the displayDensity input properties. The official release is scheduled for Ignite UI for Angular 17.0.0, and the properties will be removed in Ignite UI for Angular 18.0.0. The way to set the display density or size of the components going forward is by utilizing a single custom CSS property - --ig-size.

Why Was All of This Necessary?

This change not only allowed us to eliminate a bunch of CSS class bindings scattered all over our Angular components but also empowered us to simplify the implementation of component sizing in the CSS stylesheets. What we have now is a universal way of changing the size of all components in an app across all of our modern UI component frameworks.

The tools we used to implement component sizing in Ignite UI for Angular 16.1.0 are now exposed as public Sass API, which allows your components and layouts to respond to changes in --ig-size the same way Ignite UI for Angular components does.

How To Size Your Components

1. Start with a cleanup

Remove all declarations where the DisplayDensityToken is provided:

// *.component.ts
// remove the provider declaration for `DisplayDensityToken`
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact } }]

Remove all bindings or programmatic assignments to the displayDensity input property:

<!-- Remove `[displayDensity]="'compact'"` -->
<igx-grid [displayDensity]="'compact'">...</igx-grid>

2. Then move your app to CSS-based sizing

Instead, use the custom CSS property --ig-size to achieve the same result as with displayDensity. In addition to --ig-size, we include CSS properties for the allowed component sizes:

• --ig-size-small - it will size the component to the equivalent of compact;
• --ig-size-medium - it will size the component to the equivalent of cosy;
• --ig-size-large - it will size the component to the equivalent of comfortable;

Here's a practical example:

/* Add --ig-size to a component or global file. */
igx-grid {
--ig-size: var(--ig-size-small);
}

Alternatively, if you want all components in your app to be small, do the following:

body {
--ig-size: var(--ig-size-small);
}

3. Build custom layouts that respond to change in size

As mentioned earlier, Ignite UI for Angular 16.1.0 exposes a new and easy-to-use Sass API as part of our theming library, allowing you to create sizable layouts and components. Let's say we want to make a div element that changes its size based on the value of --ig-size. Here's how we can achieve it:

<div class="square"></div>

@use "igniteui-angular/theming" as *;
%sizable-element {
@include sizable();
}
.square {
/* Make the element sizable */
@extend %sizable-element;
/*
* Define the default size of the element and
* bind it to the `--ig-size` custom property
*/
--component-size: var(--ig-size, var(--ig-size-large));
/* Define small (10px), medium (20px), and large (30px) sizes */
--size: #{sizable(10px, 20px, 30px)};
width: var(--size);
height: var(--size);
container: square;
}

As you can see from the example above, by utilizing just one Sass mixin and one function, we've made our element sizable. Every time you change the value of --ig-size to one of the allowed options, the .square element will resize.

Bonus

In the future, when the support for container queries is more widely adopted across browsers, we will be able to reap even more benefits of having --ig-size.

/* Set the background to red when the square container is small */
@container square style(--component-size: 1) {
.square {
background: red;
}
}

Wrap-Up

Committed to providing you with the best Angular UI toolkit and related insights, our goal is to empower you with more know-how, new features, enhanced performance, and improved stability. Apart from the newest Pivot Grid that is so crucial, we know that other components like the Angular Data Grid are also super-critical. That's why we published a helpful Angular UI Data Grid tutorial to help you learn how to create a full-featured Angular UI Grid from scratch. Go on and watch it.

On top of this, having the goal to accelerate the entire design-to-code process even further, we continue to develop the best cloud-based, low-code platform — App Builder(TM). It maps Sketch or Figma design files to real UI components, creating production-ready code in Angular, Blazor, or Web Components.

Some of the enhancements were added thanks to the requests from users like yourself through our Ignite UI for Angular GitHub repository. With this in mind, we are always open to suggestions and feedback – it makes us grow and better respond to your development needs.

Lastly, we know that transparency and visibility of our next goals are also fundamental. That's why we always keep the roadmap up to date.

In Addition

Follow Ignite UI for Angular on Medium to stay up to date and learn about the latest Angular-related projects we are working on. Give us a star on GitHub and help us continue improving our product by addressing any concerns, questions, or feature requests in the issues section.