How to align mat-cell content with icon to right on angular2/material?

Question

To begin with my Code:

<!-- Edit Column -->
<ng-container mdColumnDef="edit">
  <md-header-cell *mdHeaderCellDef> {{'companies.edit-column' | translate}}</md-header-cell>
  <md-cell *mdCellDef="let element"><a (click)="toCompany(element.id)"><md-icon class="md-dark">edit</md-icon></a></md-cell>
</ng-container>

The Requirement is to adjust the position of the edit icon to the right (with respect of material design's right padding)? Right now it appears to be forcibly left-docked. Applying a style="{text-align: right}" to md-cell does not work.

version of libs:

"@angular/material": "2.0.0-beta.10"
"@angular/cdk": "^2.0.0-beta.10",
"@angular/common": "^4.1.3"

By any chance are you also using FlexLayout too? You can use the fxLayout directives here, positioning it with fxFlex shouldn't be a problem — Sonicd300, Sep 18 '17 at 15:24

Vega · Accepted Answer · 2018-01-25T20:32:43.503

15

Use either of these:

mat-cell{
  display:flex !important;
  justify-content:flex-end!important;

}

::ng-deep .mat-cell{
  display:flex !important;
  justify-content:flex-end!important;
}

DEMO

edited Jan 25 '18 at 20:32

answered Sep 18 '17 at 15:14

Vega

27,856
27
95
103

2

Worked as expected. Thanks a lot! – v.chjen Sep 18 '17 at 17:48
2

Great! :) If you wish to align the headers too : https://stackoverflow.com/a/46155684/5468463 – Vega Sep 18 '17 at 17:51

How to align mat-cell content with icon to right on angular2/material?

1 Answers1