In my Angular 8 application, I am working on implementing sorting using the ng-bootstrap table. I referred to the example available at . In the sample, when I hover over the table header, it changes to a hand pointer with a highlighted class applied as shown in the image below:
https://i.sstatic.net/v3XxV.png
Upon clicking the header, an arrow appears on the left side of the header value, with the corresponding class highlighted in the image below:
https://i.sstatic.net/R3Ala.png
After inspecting the 'table-sortable.ts' file, it became clear that these styles are being generated from the 'host' property of the directive, indicated in the image below:
https://i.sstatic.net/PIRc9.png
However, despite using the same directive in my Angular app, I noticed that the styles are not being applied to the header element. Although the sorting functionality still works, the expected cursor change and arrow display upon hovering and clicking on the header are missing. Even though the 'asc' class is added to the header element, the classes highlighted in the previous images do not appear here, as shown below:
https://i.sstatic.net/nmHdM.png
I am struggling to determine why the styles are not being applied correctly. I have even tried setting the 'ViewEncapsulation' property to 'None' in the parent component, but the issue persists. Any assistance in resolving this matter would be greatly appreciated.