| title | Display Density | Ignite UI for Angular |
|---|---|
| description | The Ignite UI for Angular provides a way of setting display density property on application or component level. |
| keywords | Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Components, Native Angular Controls, Native Angular Components Library, density, display density |
| _language | kr |
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.
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.
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>- DisplayDensity
- DisplayDensityBase
- IDisplayDensityOptions
- DisplayDensityToken
Our community is active and always welcoming to new ideas.