0

I want a add a particular style to a frozenLeft ngx datatable column upon scroll. So far what I have achieved is triggering a function call on scroll and setting a flag to true to indicate that the style should be applied.

onScroll(event){
    if(event.offsetX > 0){
        this.flag=true;
    }
}

But, in ng-datatable column [ngClass]="{'custom-style': flag}" is not working (class is not getting appended to the element). Also tried [cellClass] I am not able to figure out how to use [cellClass]="getClass" to trigger the change whenever I scroll.

Your help is appreciated.

LoneWolf
  • 119
  • 1
  • 11

1 Answers1

1

You can use condition in the ngClass and apply the class based on it:

<div [ngClass]="flag ? 'applyStyle' : 'noStyle'"> </div>

If this doesn't work, there might be an issue with view encapsulation. You need to remove it. You should check this thread, it explains how to do that in simple steps.

Also, make sure your change detection strategy is set to default or make change detection if it is OnPush which will update the view properties.

Apoorva Chikara
  • 8,277
  • 3
  • 20
  • 35
  • ```ViewEncapsulation.none``` and ```[ngClass]="{'custom-style': flag}"``` did the magic, but my all other styles are gone, I think it is expecting the styles from global ```style.(s)css```. Without ```ViewEncapsulation.none``` I can use ```[cellClass]``` but it is not dynamic on scroll. Ideally I need something like ```[cellClass]="{'custom-style': flag}"```. I cant move my styles to global css file. – LoneWolf Aug 28 '21 at 12:17
  • Hey, it worked without ```ViewEncapsulation.none```. just had to use ternary syntax like ```[cellClass]="flag ? 'custom-style' : 'none'"```. Can you edit your answer and replace ```[ngClass]``` by ```[cellClass]```, so that I can accept the answer. Thank you – LoneWolf Aug 28 '21 at 12:21
  • 1
    Yes, the later one is just to give you an idea if things don't work with ternary. You just need to work with ternary thats it. Glad its working. – Apoorva Chikara Aug 28 '21 at 13:08
  • You can mark it as accepted for other users. Thanks ! – Apoorva Chikara Aug 28 '21 at 13:08