angular material 2 table header center alignment
Solution 1
Update for Angular Material 5.x.x, no need for ng-deep:
mat-header-cell {
display:flex;
justify-content:flex-end;
}
md-header-cell
get 'translated' to a container with class="mat-sort-header-container". Using that, you set its style with ng-deep
. Use flexbox to center its content. Put the following in the components stylesheet:
::ng-deep .mat-sort-header-container {
display:flex;
justify-content:center;
}
Solution 2
The accepted answer is correct. However, ::ng-deep
is depreciated and maybe dropped in future (official documentation).
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
The proper way is to use ViewEncapsulation. In your component.ts, add the following:
import { ViewEncapsulation } from '@angular/core';
@Component({
....
encapsulation: ViewEncapsulation.None
})
and override the class in your component.css file:
.mat-sort-header-container {
display:flex;
justify-content:center;
}
Solution 3
.mat-header-cell { text-align: center; }
Solution 4
If you don't want all header cells to align-center you can combine two classes:
.mat-header-cell.text-center { text-align: center; }
Then on the html:
<th mat-header-cell *matHeaderCellDef class="text-center">Actions</th>
Solution 5
I think the given solutions to the problem are too strict in their approach, i had a similar issue where i needed to change some css properties of mat-sort-header-container
, but dynamically.
I did something like Vega's answer but minutely different on how styles are taken :
::ng-deep .mat-sort-header-container{
justify-content: inherit;
/* other inheritable properties */
}
which opens some properties for its parent to style mat-header-cell
which is in your html code so whatever style you provide in mat-header-cell
and in the ng-deep
which is inheriting from its parent then only those styles and none other than that would go down that hierarchy .
Yong
Updated on January 06, 2021Comments
-
Yong over 3 years
If md-sort-header is added into md-header-cell in md-table, it is always left-alignment. How to center-align header cells, such "name"?
<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> Name </md-header-cell>
-
Vega almost 7 years:ng-deep is not depricated! it's /deep/ only. encapsulation may affect other classes
-
Faisal almost 7 yearsPlease read the documentation:
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep).
-
Faisal almost 7 years@Vega , I am not saying that your answer doesn't work, the OP may face an issue in future once
::ng-deep
is dropped completely. -
Deniss M. over 6 yearsThanks for the solution! I wanted to add that if you want to center only one table header, then you can create your own custom class with name like
mat-sort-header-container-centered
with the outlined above css and assign it to your cell like this<md-header-cell *cdkHeaderCellDef md-sort-header class="mat-sort-header-container-centered">
-
Faisal over 6 years@DenissM. yes exactly :) I do the same and avoid using
::ng-deep
. -
Vedha Peri over 5 yearsWorks great. Thank you!
-
Debadatta about 5 years::ng-deep is easier to use, and is it really depreciated?
-
Alberto Chiesa over 4 yearsI think ::ng-deep is going to stay deprecated forever, and when it will be dropped an alternative will be provided. Until then, it's going to stay. It's been deprecated 3 versions ago and still going strong.
-
dmoore1181 over 3 yearsThank you for this answer, I did have to use the ng-deep example with Angular 7 though.
-
Dane Brouwer about 3 yearsAvoid using
ViewEncapsulation.None
at all costs unless you know exactly what you're doing.