Angular & Mat-table - How to disable/enable Drag & Drop mode?

Question

My material table is with Drag & Drop enable. I want add togle button to Disable/Enable this mode.

My HTML template:

<table mat-table #table [dataSource]="dataSource | periodicElementFilter:periodicElementFilter" class="mat-elevation-z8"
  cdkDropList
  (cdkDropListDropped)="dropTable($event)">
    ...
</table>

My typeScript component:

enableDragDropMode(event: MatSlideToggleChange) {
  // ???
}

Demo online HERE

Answer 1

I find solution HERE:

<table mat-table #table [dataSource]="dataSource | periodicElementFilter:periodicElementFilter" class="mat-elevation-z8"
  cdkDropList
  (cdkDropListDropped)="dropTable($event)"
  [cdkDropListDisabled]="dragDisabled">

And

enableDragDropMode(event: MatSlideToggleChange) {
  this.dragDisabled = !event.checked
}

And upgrade Angular to 8.0.3+ and "@angular/material": "8.0.1+"

Answer 2

You can use @Input('cdkDropListDisabled'), which is boolean type and manage it by changing this input value.

Add below code to your table:

[cdkDropListDisabled]="yourBooleanProperty"

Then inside your enableDragDropMode function change yourBooleanProperty value based on event :)

Hope it helps!

Answer 3

You can add this attribute [cdkDragDisabled] = "true". Reference link https://material.angular.io/cdk/drag-drop/api