Html – In Angular, mat-sort-header is having a property of text-align: center. I want to override it and text-align:right. But it is not working

I assume you want to align the contents of the header to the right. It won’t work by changing the text-align property. If you inspect the element in the DOM, you’ll see that the mat-sort-header directive puts an additional flex container inside the header, which contains both the header text and the sort arrow. To alight the content to the right, you have to apply justify-content: end; on that container.

You can add additional class on the header:

<th class="centered-header" mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>

And define the class in the global styles.scss:

.centered-header {  
  .mat-sort-header-container {
    justify-content: end;
  }
}

Or you can just set it globally without adding new class:

.mat-sort-header-container {
    justify-content: end;
}

Note that since this happens inside a new component injected through a directive, this needs to happen in global styles. Alternatively you can use ::ng-deep and place it in your component style, but it will still be promoted to global style (read here), so the effect is pretty much the same.

Here’s an stackblitz based on the example from the official docs.