0

Boa tarde pessoal!

Já tentei de várias formas fazer uma alteração de mudança cor de uma row do ngx-datatable, mas única forma que consegui foi alterar o color hover da minha row. O que preciso é alterar a cor ao selecionar uma linha, igual a este exemplo: https://stackblitz.com/edit/angular-gk6hut?file=src%2Fstyles.scss, mas não consegui de nenhuma forma.

Como está atual:

: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;
}
2
  • Não seria uma , faltando depois do segundo .datatable-body-row:hover prntscr.com/o0lbl4
    – hugocsl
    Commented 11/06/2019 às 18:57
  • 1
    Hugo, do jeito que está o código está funcionando, porém, está mudando somente a linha quando mantenho o mouse em cima da linha, que seria o datatable-body-row:hover, quando tiro o mouse, a cor do background volta. O que preciso é alterar a cor ao clicar, com um selected active que o próprio ngx-datatable possui, mas infelizmente não estou conseguindo.
    – Samuel WNI
    Commented 11/06/2019 às 19:15

1 Resposta 1

-1

Acredito que se você utilizar como abaixo, funcione:

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

Mas você precisa deixar o view-encapsulation do seu componente como padrão.

Todo estilo com ::ng-deep fica global. Lembrando também que esse é um recurso deprecated pelo time do Angular: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep. E a estilização do ngx-datatable é baseada em SCSS https://swimlane.gitbook.io/ngx-datatable/themeing

3
  • Desculpe a minha ignorância patrick, mas estou começando no angular agora, como deixo meu view-encapsulation como default?
    – Samuel WNI
    Commented 12/06/2019 às 14:15
  • Somente não setando ele no decorator do seu componente. Por exemplo, tem que ficar somente assim: @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }), sem a propriedade encapsulation: Commented 12/06/2019 às 16:44
  • Muito obrigado, mas infelizmente não funcionou, já tentei de várias formas, mas o único atributo que consigo alterar é o row: hover mesmo.
    – Samuel WNI
    Commented 12/06/2019 às 16:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .