Search code examples
angulardrag-and-dropangular-material

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

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) {
  // ???
}

enter image description here

Demo online HERE

Solution

  • I find solution HERE:

    enter image description 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+"