Angular Material Table not allowing for drag and drop disable flag for columns

Question

I am using angular material table with some of the following settings:

<table
    mat-table
    [ngStyle]="{'height': '600px'}"
    [dataSource]="items"
    multiTemplateDataRows
    matSort
    (matSortChange)="sortData($event)"
    [matSortActive]="componentSettings.header.sort"
    [matSortDirection]="componentSettings.header.order"
    cdkDropList
    cdkDropListOrientation="horizontal"
    (cdkDropListDropped)="drop($event)"
    [cdkDragDisabled]="!editMode"
>

I am getting the following error:

template.html:26 NG0303: Can't bind to 'cdkDragDisabled' since it isn't a known property of 'table' (used in the 'TableDataComponent' component template).
1. If 'table' is an Angular component and it has the 'cdkDragDisabled' input, then verify that it is a part of an @NgModule where this component is declared.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Is there a way to disable column drag and drop with a boolean flag?

Answer 1

If you would like to disable sorting entire table, you can set cdkDropListSortingDisabled.

<table

    cdkDropList
    cdkDropListOrientation="horizontal"
    (cdkDropListDropped)="drop($event)"
    [cdkDropListSortingDisabled]="!editMode"
>

Or you can set cdkDragDisabled to child elements.

<table
       :
    (cdkDropListDropped)="drop($event)"
>
  <tr [cdkDragDisabled]="!editMode">
  </tr>
</table>