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.
Angular Display Density Example
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.