title: How to wrap column header in ag-grid using angular
body: <p>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.</p>
  
  <pre><code>::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text{
    white-space: normal;
    overflow-wrap: break-word;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" &gt;
    &lt;/ag-grid-angular&gt;
  </code></pre>
  
  <p>but the column header remains the same. I wanted to wrap the column header text to multiple lines. Is there anyway to do this?</p>
  
  <p><strong>Note:</strong> I can able to wrap the content using <code>cellStyle: {'white-space': 'normal'}</code> </p>
  
  <pre><code>{headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}},
  </code></pre>
  
  <p>But I wanted to wrap the header.</p>