stylingignite-ui-angularigx-grid

How to set custom background color for selected rows in igx-grid

I am using Infragistics igxGridComponent. I am trying to style the look of selected rows.

I have tried setting my own css classes:

.selected-row {
  background-clor:red;
  color:white;
  font:bold;
}

However, I am not really sure how to apply them conditionally. Should I be using ngClass or there is another syntax to this?

Solution

  • You can use the igx-grid-theme SASS function to create a custom theme:

    $custom-theme: igx-grid-theme(
  $row-selected-background: green,
  $row-selected-text-color: #000,
  $row-selected-hover-background: red
);

    And then pass it to the igx-grid SASS mixin:

    ::ng-deep {
  @include igx-grid($custom-theme);
}

    Here you can find an example.