Programmatically hide columns in GridComponent with Kendo UI for Angular

Question

I'm trying to set columns in GridComponent as hidden programmatically with Kendo UI for Angular, but can't find any function or property other than the [hidden] property on the component html element.

It's the same functionality as when you check a column as visible/hidden in the column menu I'm looking for.

Is this possible?

Answer 1

I have edited the example of this hide column, column menu is working and column is hiding as well

Example URL : https://stackblitz.com/edit/angular-s2rip3?file=app/app.component.ts

you can visit here to see update example https://gvfum8.run.stackblitz.io and code for this example

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData" style="height:400px" [columnMenu]="true">
          <ng-template ngFor [ngForOf]="columns" let-column>
            <kendo-grid-column
              field="{{column}}"
              [hidden]="hiddenColumns.indexOf(column) > -1"
            >
              <ng-template kendoGridHeaderTemplate let-dataItem>
                  {{dataItem.field}}
              </ng-template>
            </kendo-grid-column>
          </ng-template>
        </kendo-grid>
    `
})
export class AppComponent {
    public gridData: any[] = sampleCustomers;

    public columns: string[] = [
      'CompanyName', 'ContactName', 'ContactTitle'
    ];

    public hiddenColumns: string[] = [];

    public restoreColumns(): void {
        this.hiddenColumns = [];
    }

    constructor(){
      this.hiddenColumns.push("CompanyName");
    }
}

There are three columns, 1st column is hidden and showing two columns.