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.