Как использовать свойство headerClass ag-grid в angular?

Question

Недавно я добавил сетку a-grid в свой проект angular.

Я хочу изменить семейство шрифтов заголовка моей сетки. Я знаю, что есть свойство с именем headerClass, и это место определения класса заголовка. но когда я применил это свойство, ничего не изменилось в моем семействе шрифтов заголовка.

Это html file:

<ag-grid-angular  style="width: 100%; height: 500px;"
                  class="ag-theme-blue"
                  [rowData]="gridOptions.rowData"
                  [columnDefs]="gridOptions.columnDefs"
                  [defaultColDef]="gridOptions.defaultColDef"
                  [enableRtl]="agGridPropeties.enableRTL"
                  [localeText]="localeTextPersian"
                  [rowSelection]="agGridPropeties.rowSelection"
                  [multiSortKey]="agGridPropeties.multiSortKey"
                  [pagination]="agGridPropeties.pagination"
                  [paginationPageSize]="agGridPropeties.paginationPageSize"
> 
</ag-grid-angular>

Это мой класс:

.my-header-class {
  font-family: tahoma;
  font-weight:bold;
}

и это мой файл ts:

public gridOptions: any = {
  defaultColDef: {
    resizable: true,
    sortable: true,
    filter: true,
    headerClass: 'my-header-class'
  },

  columnDefs : [
    {headerName: 'Make', field: 'make'},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price'},
    {headerName: 'Country', field: 'country'},
  ],

  rowData : [
      { make: 'TOYOTA', model: 'Celica', price: 35000, country:'Japan'},
      { make: 'FORD', model: 'Mondeo', price: 32000, country:'USA'},
      { make: 'BENZ', model: 'C200', price: 100000, country:'Germany'},
      { make: 'LAMBORGHINI', model: 'Aventador', price: 350000, country:'Italy' }
  ]
}

Но семейство шрифтов заголовка столбца не такое, как я ожидал.

У вас есть идея?

Answer 1

Посмотрите на ссылку ниже.

stackblitz-ag-grid-header-class

Я внес только одно изменение, добавил encapsulation: ViewEncapsulation.None, чтобы применить css.

или вы можете поместить свой класс css в свой основной style.css/style.scss файл

, надеюсь, это поможет вам, дайте мне знать, если у вас все еще есть проблема с ним.

спасибо