How to change the color of a Row with a ngx-datatable active Selected?

Asked

Viewed 185 times

1

Good afternoon, everyone!

I have tried several ways to make a color change of an ngx-datatable Row, but only way I could was to change the color Hover of my Row. What I need is to change the color when selecting a line, like this example: https://stackblitz.com/edit/angular-gk6hut?file=src%2Fstyles.scss, but I couldn’t in any way.

How current:

:host
::ng-deep
.ngx-datatable.bootstrap:not(.cell-selection)
.datatable-body-row:hover,
:host
::ng-deep
.ngx-datatable.material:not(.cell-selection)
.datatable-body-row:hover
.datatable-row-group {
background: blue;
}
css angular typescript

  • Would not be a , missing after the second .datatable-body-row:hover http://prntscr.com/o0lbl4

  • 1

    Hugo, the way the code is working, however, is only changing the line when I keep the mouse on top of the line, which would be the datatable-body-Row:Hover, When I take the mouse, the background color comes back. What I need is to change the color when clicking, with a Selected active that ngx-datatable itself has, but unfortunately I’m not getting.

1 answer

0

I believe that if you use as below, it works: 

:host ::ng-deep .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group {
   background: red !important;
}

But you need to let the view-Encapsulation of your component as a standard.

Any style with ::ng-deep global. Also remembering that this is a resource deprecated by the Angular team: https://angular.io/guide/component-styles#deprecated-deep-and-ng-deep. And the stylization of ngx-datatable is based on SCSS https://swimlane.gitbook.io/ngx-datatable/themeing

  • Excuse my Patrick ignorance, but I’m starting at the angle now, as I leave my view-Encapsulation as default?

  • Just not setting it on decorator of its component. For example, it has to be just like this: @Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
}), without the property encapsulation:

  • Thank you very much, but unfortunately it didn’t work, I’ve tried several ways, but the only attribute I can change is Row:.

Browser other questions tagged css angular typescript

You are not signed in. Login or sign up in order to post.