Display Density

Display density configuration can significantly improve the visual representation of large amount of data. In Ignite UI for Angular, we provide a pre-defined set of options – comfortable, compact and cosy.

Using the DisplayDensityToken injection token, you can configure the display density on an application and/or on a component level.

Display Density Demo

Note

To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the installation topic.

Usage

Setting display density on an application/component level

To set the display density, use the DisplayDensityToken injection token to create a DI provider.

providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact } }],

You can set the display density's default value through useValue or useFactory.

Depending on the required scope, you can apply the created provider for the entire application or to a component.

Setting control display density explicitly

To set the display density explicitly for a control, use the displayDensity input.

<igx-input-group [displayDensity]="'cosy'"> ... </igx-input-group>

API References

Additional Resources

Our community is active and always welcoming to new ideas.