Angular Grid, Allow wrapping of column header text upon resizing only

[Kunal]

For the Angular Data Grid, I use the autoFitColumn property as below to expand all the columns to take the maximum width of the column. I have large column names and default is set to not wrap hence column widths are as per the column names and not the content. This is desired behavior on initial rendering. However upon user resizing of columns, I would like column names to wrap, I am not able to figure this one out. 
If I set the css property as below to normal then on initial rendering, it will wrap column name and I do not want that

Also how to add a tooltip to the column name. This helps with resizing which cuts the header with ellipsis


  public ngAfterViewInit() {
  
    if (this.grid && this.grid.columns) {
      this.grid.columns.forEach((item, index) => {
        if (!this.isColumnWidthSet(item.field))
          this.grid.autoFitColumn(item);
      });
    }

  }
  
  css property to use 
  
.k-column-title
{
    white-space:normal;
}