How to wrap column header in ag-grid using angular

I have some columns which has four words i.e Pre Trading Follow Up, Post Trading Follow Up and some of them having three words. I tried the below css to wrap the text to multiple lines.

::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text{
  white-space: normal;
  overflow-wrap: break-word;
}

HTML

<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" >
  </ag-grid-angular>

but the column header remains the same. I wanted to wrap the column header text to multiple lines. Is there anyway to do this?

Note: I can able to wrap the content using cellStyle: {'white-space': 'normal'}

{headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}},

But I wanted to wrap the header.

from How to wrap column header in ag-grid using angular