Customize IgxGrid Sorting Indicator Icons With Templates

Hello

I currently have a problem with a sortable grid. I want to include individual icons like this Angular Grid Sorting | Data Sorting | Ignite UI for Angular | infragistics, but unfortunately I can’t figure out where exactly to put the ng-template. I already have all the options that made sense to me, but the grid does not want to take my icons.

This is my grid:

                
                    
                        
                         
                        
                            {{ getUserInitials(cell.row.data.id) }}
                            
                        
                        {{cell.value}}
                    
                
                

                    
                        
                        {{cell.value}}%
                    
                
                
                
                    
                        {{ cell.value }}
                        -
                    
                
                
                    

bar_chart

 

 

swap_vertarrow_downwardarrow_upward

Hello Michael,

Thank you for posting in our community!

I have been looking at your question and have prepared a small sample trying to reproduce the described behavior. However, on my side, everything works as expected and as could be observed in the attached GIF file, the sorting indicator icons are changed successfully. I have tested the behavior under version 13.1.15.

Additionally, in order to be able to assist you further, I will need some additional information regarding your scenario. Could you please clarify under which version of Ignite UI for Angular you are experiencing this issue?

I am asking this question, because as mentioned in our official change log notes here, directives for re-templating header sorting indicators are introduced in version 13.0.0 and in case the igniteui-angular version on your side is older, then it is expected the icons to remain the same.

Here could be found my sample for your reference. Please test it on your side and let me know how it behaves.

Thank you for your cooperation. Looking forward to hearing from you.

Sincerely,Riva IvanovaEntry Level Software Developer