material 11 - unable to right justify 2 out of 5 columns mat-header-cell when mat-sort-header is applied

Question

enter image description hereI'm using Angular material 11. When defining each column header using *matHeaderCellDef with mat-header-cell and when mat-sort-header applied, I am in a situation where I am unable to apply the desired style. I'm able to right justify the content of cells underneath the headers by applying align="right". However, not only is that not allowed for the header, but it seems that adding css class to provide any adjustments is not performing adequately when mat-sort-header is applied. It seems that mat-sort-header ends up constructing a child element with inline styling that overrides any css class applying above.

I've tried many things, including other posts that inspired ideas. However, haven't seen this exact issue anywhere.

I have 2 columns: "weight" and "values" which I'm trying to right justify the column titles.

StackBlitz

I appreciate any help with this. Thank you

Answer 1

You can make your header right using the below style

:host ::ng-deep .headerRight .mat-sort-header-content {
  justify-content: flex-end !important;
  width: 100% !important;
}