Solución:
La alineación de la celda se realiza de forma predeterminada a través de flexbox cuando se usa <mat-header-cell> y <mat-cell>, pero no cuando usas <th mat-header-cell> y <td mat-cell>. Cuando se utilizan los elementos de la tabla, la alineación se realiza con text-align. Si fuerza flexbox todo el tiempo, las celdas de la tabla que usan th y td tienen la posibilidad de perder la alineación vertical con el resto de la mesa.
Encontré que una combinación de escenarios text-align: right y ambientación justify-content: flex-end funciona mejor. De esa forma, elementos con display:table-cell usar text-align, y elementos con display:flex usar justify-content.
Por tu ejemplo:
.header-align-right {
text-align: right;
justify-content: flex-end;
}
Para que la flecha aparezca antes del encabezado, debe usar el arrowPosition atributo.
Además, sugeriría usar la clase de columna agregada automáticamente (.mat-column- + valor sensible a mayúsculas y minúsculas de matColumnDef) en lugar de agregar class="header-align-right". Eso alineará los encabezados, celdas y pies de página. Así que esto es lo que sugeriría:
.mat-column-Number {
text-align: right;
justify-content: flex-end;
}
<ng-container matColumnDef="Number">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Number</th>
<td mat-cell *matCellDef="let row">{{row.Number}}</td>
<td mat-footer-cell *matFooterCellDef></td>
</ng-conIainer>
Demo en vivo
.header-align-right{
display: flex;
padding: 21px 0;
justify-content: flex-end;
}
copia y pega este código en tu css
:host ::ng-deep .mat-sort-header-container {
display: flex;
justify-content: center;
}
th.mat-header-cell, td.mat-cell {
text-align: center;
}