web-dev-qa-db-ja.com

angularマテリアル2テーブルヘッダーの中央揃え

Md-sort-headerがmd-tableのmd-header-cellに追加された場合、それは常に左揃えです。 「名前」などのヘッダーセルを中央揃えにする方法は？

<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> 
      Name 
</md-header-cell>

plnkr

angularangular-materialangular-material2
25
Yong

Angular Material 5.x.xの更新、ng-deepは不要：

  mat-header-cell {
   display:flex;
   justify-content:flex-end;
  }

DEMO

md-header-cellは、class = "mat-sort-header-container"でコンテナーに「変換」されます。それを使用して、スタイルを ng-deep で設定します。 flexboxを使用して、コンテンツを中央揃えにします。コンポーネントのスタイルシートに次を入力します。

::ng-deep .mat-sort-header-container {
  display:flex;
  justify-content:center;
}

DEMO

39
Vega

受け入れられた答えは正しいです。ただし、::ng-deepは減価償却され、将来的には廃止される可能性があります（ 公式ドキュメント ）。

シャドウピアスの子孫コンビネータは廃止され、主要なブラウザとツールからサポートが削除されます。そのため、Angular（/ deep /、>>>、および:: ng-deepの3つすべて）のサポートを削除する予定です。それまでは、ツールとの幅広い互換性のために:: ng-deepを優先する必要があります。

適切な方法は ViewEncapsulation を使用することです。 component.tsで、次を追加します。

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

component.cssファイルのクラスをオーバーライドします。

.mat-sort-header-container {
  display:flex;
  justify-content:center;
}
8
Faisal
.mat-header-cell {    text-align: center;    }
4
dayderluv

すべてのヘッダーセルを中央揃えにしたくない場合は、2つのクラスを組み合わせることができます。

.mat-header-cell.text-center { text-align: center; }

次に、htmlで：

<th mat-header-cell *matHeaderCellDef class="text-center">Actions</th>
2
guizo

問題に対する特定の解決策はアプローチが厳しすぎると思いますが、mat-sort-header-containerのc​​ssプロパティを動的に変更する必要がある同様の問題がありました。

私はベガの答えのようなことをしましたが、スタイルの取り方が微妙に異なります：

::ng-deep .mat-sort-header-container{
    justify-content: inherit;
    /* other inheritable properties */
}

mat-header-cellおよび親から継承しているmat-header-cellで提供するスタイルはすべてhtmlコード内のng-deepスタイルに親のいくつかのプロパティを開きます。それ以外はその階層を下って行くことはありません。

0
Aakash Uniyal