Hoe to sort column menu in Kendo Angular Grid

I can sort the column menu in Kendo Grid using Jquery as following

 <script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" },
      { field: "city" }
    ],
    **columnMenu: {
      columns: {
        sort: 'asc'
      }
    },**
    sortable: true,
    dataSource: [
      { name: "Jane Doe", age: 30, city: "London" },
      { name: "John Doe", age: 33, city: "Madrid" }
    ]
  });
</script>

But I don't know how can we do same thing in Kendo Angular grid? Can anyone please help to achieve this in angular?

I am able to fix the issue. Following is the solution :

Template code

<ng-template kendoGridColumnMenuTemplate let-service="service">
    <kendo-grid-columnmenu-sort [service]="service"></kendo-grid-columnmenu-sort>
    <kendo-grid-columnmenu-filter [service]="service"></kendo-grid-columnmenu-filter>
   
    <div class="dropdown">
        <div class="dropbtn">Columns</div>
        <div class="dropdown-content">
            <div style="height: 200px; overflow-y: auto">
                <div *ngFor="let col of columns; let i = index">
                    <div class="k-column-list-item">
                        <input type="checkbox" kendoCheckBox [(ngModel)]="col.hidden" (click)="columnClicked(i)">{{ col.title }}
                    </div>
                </div>
            </div>
            <div style="padding: 6px">
                <button style="margin: 2px" kendoButton type="button" (click)="resetCheckboxes()">
                    <span>Reset</span>
                </button>
                <button style="margin: 2px" kendoButton type="button" (click)="applyColumnChooser()">
                    <span>Apply</span>
                </button>
            </div>
        </div>
    </div>
</ng-template>

ts code:

sortColumnChooser() {
this.columns = this.defaultGridSettings.columns.slice().sort((a, b) => a.title.localeCompare(b.title))
  .map(column => ({
    field: column.field,
    hidden: !column.hidden,
    title: column.title
  }));
 this.originalCheckboxes = this.columns.map(col => col.hidden);  
}

columnClicked(columnIndex: number) {
    var field = this.columns[columnIndex].field;
    if (!this.columnFields.find(item => item.field === field)) {
      this.columnFields.push({ field: field });
    } }  applyColumnChooser() {
    this.columnFields.forEach(column => {
      let gridColumn = this.gridSettings.columns.findIndex((col) => col.field === column.field);
  if (gridColumn !== -1) {
    this.gridSettings.columns[gridColumn].hidden = !this.gridSettings.columns[gridColumn].hidden;
  }
});

this.originalCheckboxes = [];
this.sortColumnChooser();

this.extended = true;
    if(this.columnFields.length !== 0){
      this.refresh();
    }
    this.columnFields = [];  
} 

resetCheckboxes(): void {
    this.columns.forEach((col, index) => {
      col.hidden = this.originalCheckboxes[index];
    });
    this.columnFields = [];
}

I have called the method sortColumnChooser() on ngOnInit