How to use headerClass property of ag-grid in angular?

Question

Recently I added a-grid grid to my angular project.

I want to change font-family of header of my grid. I know that there is a property named as headerClass and it is the place of header class definition. but when I applied this property nothing changed to my header font family.

It is 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>

It is my class:

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

and it is my ts file:

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' }
  ]
}

But the column header font family is not as I expected.

Do you have any Idea?

Answer 1

Look at below link.

stackblitz-ag-grid-header-class

I have made only one change, added encapsulation: ViewEncapsulation.None to apply css.

or you can put your css class to your main style.css/style.scss file

hope this would help you, let me know if you still have an issue with it.

thanks