Align right one mat-header-cell in a angular material table with sort headers

Issue

I am trying to align one of the headers in my table right. I tried:

.header-align-right {
    display: flex;
    justify-content: flex-end;
  }

In a class and add it to the mat-header-cell. This aligned the text right but also added weird spacings to the element that made it not aligned with the rest of the headers. Tried it also without the display:flex but that did nothing.

<ng-container matColumnDef="Number">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right">Number</th>
        <td mat-cell *matCellDef="let row" align="right">{{row.Number}}</td>
        <td mat-footer-cell *matFooterCellDef></td>
</ng-conIainer>

As you see i align right the content of the cell and I would like to align the header as well.

Solution

Live demo

.header-align-right{
  display: flex;
  padding: 21px 0;
  justify-content: flex-end;
}

Answered By - umutesen