[SOLVED] How to place the arrow to the right of the header of a sorted table?

How to place the arrow to the right of the header of a sorted table?

I have a table and I want to add the sort option to all table headers, so I used the bootstrap exemple for my purpose.

The only problem in this example is the position of the arrow which is on the left side and I want it on the right side of the header element.

I checked the directive code and I found the code below :

@Directive({
  selector: 'th[sortable]',
  standalone: true,
  host: {
    '[class.bi-caret-down-fill]': 'direction === "asc"',
    '[class.bi-caret-up-fill]': 'direction === "desc"',
    '(click)': 'rotate()',
  },
})

How should I change the host style to move the arrow to the right side ?

Solution

On index.html css code which is handling the position is

....
th[sortable].desc:before,
th[sortable].asc:before {
    content: '';
    float: left;
.....

Change float property to right Working demo