IgxGrid 列ヘッダーへのスタイリング適用

IgxGrid の IgxColumn で公開されている headerClasses を利用することで、列ヘッダーにスタイルを適用することができます。

<igx-grid #grid1 [data]="data" width="700px"
  height="300px" displayDensity="compact">
  <igx-column field="Id" header="ID"></igx-column>
  <igx-column field="Name" header="商品名"
    headerClasses="name-column-header"></igx-column>
  <igx-column field="Price" header="価格"></igx-column>
  <igx-column field="RegisteredDate" header="登録日">
    <ng-template igxCell let-val>
      {{val | date:'yyyy/MM/dd'}}
    </ng-template>
  </igx-column>
  <igx-column field="IsActive" header="アクティブ"></igx-column>
</igx-grid>

::ng-deep {
  .name-column-header .igx-grid__th-title {
    color: red;
    text-decoration: underline;
  }
}