How do I update a variable in Angular when dragging from a specific droplist using CdkDragDrop?

Question

I am using Angular 8 with Material drag&drop. I have multiple droplists linked to three destination droplists. In my StackBlitz example here, I would like to allow only one item from the list with the id MajHermeticVirtues (second group under Major Hermetic Virtues). I have a boolean called allowedHermeticVirtues that I would like to set to false if I dragged an item from that list. If the variable is then set to false, how can I use it to block more items from the source list?

All the lists use

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
                      event.container.data,
                      event.previousIndex,
                      event.currentIndex);
      this.calculateTotal();
    }
  }

for drop events.

How can I update a variable if I dragged an item from a specific list? This question is almost what I am looking for, but only for a specific source list (in my case, the MajHermeticVirtues one).

score 0 · Accepted Answer · answered Feb 02 '20 at 21:10

Managed to get it working by changing my drop function as follows (not elegant, but seems to work):

drop(event: CdkDragDrop<any[]>) {
  if (event.previousContainer === event.container) {
        moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
      } else if (event.previousContainer.id === 'MajHermeticVirtues') {
          if (this.totalMajorHermeticVirtues < this.maxHermeticMajorVirtue) {
            this.totalMajorHermeticVirtues++;
            console.log('this.totalMajorHermeticVirtues :', this.totalMajorHermeticVirtues);

            transferArrayItem(event.previousContainer.data,
                          event.container.data,
                          event.previousIndex,
                          event.currentIndex);
            this.calculateTotal();
          }
        } else if (event.container.id === 'MajHermeticVirtues') {
            this.totalMajorHermeticVirtues--;
            console.log('this.totalMajorHermeticVirtues :', this.totalMajorHermeticVirtues);

            transferArrayItem(event.previousContainer.data,
                          event.container.data,
                          event.previousIndex,
                          event.currentIndex);
            this.calculateTotal();
      } else {
        transferArrayItem(event.previousContainer.data,
          event.container.data,
          event.previousIndex,
          event.currentIndex);
        this.calculateTotal();
      }
    }

How do I update a variable in Angular when dragging from a specific droplist using CdkDragDrop?

1 Answers1