Kendo Grid Angular Column Width, minResizableWidth dynamic

https://stackblitz.com/edit/ng-kendo-grid-col-width-kk-12?embed=1&file=app/app.component.ts&view=preview

import { Component } from '@angular/core';
import { sampleProducts } from './products';
@Component({
    selector: 'my-app',
    template: `
        <kendo-grid
                [data]="gridData"
                [reorderable]="true"
                [resizable]="true"
                [scrollable]="true"
                [groupable]="true"
                style="height: 300px">
             
                <kendo-grid-column 
                *ngFor="let column of columns;"
                    width="{{column.ColumnWidth}}"
                   minResizableWidth="{{column.ColumnWidth >= 10 ? (column.ColumnWidth - 10) : column.ColumnWidth }}"
                    field="{{column.Name}}"
                    title="{{column.Display}}">
                </kendo-grid-column>
        </kendo-grid>
    `
})
export class AppComponent {
    public gridData: any[] = sampleProducts;
    public columns = [
    {
      "Name": "ProductID",
      "Display": "ProductID Alias",
      "Type": "text",
      "Sort": true,
      "ColumnWidth": 50
    },
    {
      "Name": "ProductName",
      "Display": "ProductName Alias",
      "Type": "text",
      "Sort": true,
      "ColumnWidth": 100
    },
    {
      "Name": "QuantityPerUnit",
      "Display": "QuantityPerUnit Alias",
      "Type": "text",
      "Sort": true,
      "ColumnWidth": 150
    },
    {
      "Name": "FirstOrderedOn",
      "Display": "FirstOrderedOn Alias",
      "Type": "text",
      "Sort": true,
      "ColumnWidth": 200
    }];
}

https://stackblitz.com/edit/ng-kendo-grid-col-width-dynamic-kk-12?embed=1&file=app/app.component.ts&view=preview

import { Component } from '@angular/core';
import { sampleProducts } from './products';
import { GridComponent } from '@progress/kendo-angular-grid';
@Component({
    selector: 'my-app',
    template: `
        <kendo-grid #grid
                [data]="gridData"
                [reorderable]="true"
                [resizable]="true"
                [scrollable]="true"
                [groupable]="true"
                style="height: 300px">
             
                <kendo-grid-column 
                *ngFor="let column of columns;trackBy: dynamicColumns(grid,column)"
                    field="{{column.Name}}"
                    title="{{column.Display}}">
                       //  {{dynamicColumns(grid,column)}}
                </kendo-grid-column>
        </kendo-grid>
    `
})
export class AppComponent {
    public gridData: any[] = sampleProducts;
   public columns:any =[{
      "Name": "ProductName",
      "Display": "Product Name",
      "Type": "text",
      "Sort": true,
      "ColumnWidth":100
    },{
      "Name": "QuantityPerUnit",
      "Display": "Quantity PerUnit",
      "Type": "text",
      "Sort": true,
      "ColumnWidth": 110
    },{
      "Name": "UnitPrice",
      "Display": "Unit Price",
      "Type": "text",
      "Sort": true,
     "ColumnWidth":120
    },{
      "Name": "UnitsInStock",
      "Display": "Units InStock",
      "Type": "text",
      "Sort": true,
      "ColumnWidth":130
    },{
      "Name": "FirstOrderedOn",
      "Display": "First OrderedOn",
      "Type": "text",
      "Sort": true,
      "ColumnWidth":140
    },{
      "Name": "UnitPrice",
      "Display": "Unit Price",
      "Type": "text",
      "Sort": true,
      "ColumnWidth":150
    }];
      dynamicColumns(grid: GridComponent, column: any) {
           console.log("grid",grid);
          if (grid && column) { 
          grid.columns.forEach(col => {
            if (!col.width) {
              if (col.title == column['Display']) {
                let w = column['ColumnWidth'];
                let mw = w >= 10 ? (w - 5) : w;
                if (col.width != w) col.width = w;
                if (col.minResizableWidth != mw) col.minResizableWidth = mw;
              }
            }
          });
        }
  }
}