Tengo 3 carriles (desayuno, almuerzo, cena) cada uno tiene un *ngFor eso filtra los elementos en función de un tipo de meal_type . Lo que me gustaría hacer es usar dragula para poder arrastrar los elementos entre los diferentes carriles y actualizar el tipo de meal_type al soltar. .

 <content [dragula]='"dishes"' [dragulaModel]='dishs$ | async'> <div *ngFor="let dish of dishes$ | async | filterMeal: 'meal_type': 'breakfast'"> {{ dish.title }} | {{ dish.meal_type }} </div> </content> <content [dragula]='"dish"' [dragulaModel]='dishs$ | async'> <div *ngFor="let dish of dishes$ | async | filterMeal: 'meal_type': 'lunch'"> {{ dish.title }} | {{ dish.meal_type }} </div> </content> <content [dragula]='"dishes"' [dragulaModel]='dishes$ | async'> <div *ngFor="let dish of dishes$ | async | filterMeal: 'meal_type': 'dinner'"> {{ dish.title }} | {{ dish.meal_type }} </div> </content>

constructor

 constructor( private modalService: NgbModal, private route: ActivatedRoute, private dragulaService: DragulaService, private _teamsService: TeamsService, ) { dragulaService.drop.subscribe((value) => { console.log('value', value); this.onDrop(value.slice(1)); // I want to update the `meal_type` here // and then I can create an updateMealType() // function that will update Firebase. // But I don't know how to tell which bag I have // dropped the 'dish' into as they have the same bag name. }); } // Dragula Events private hasClass(el: any, name: string) { return new RegExp('(?:^|\\s+)' + name + '(?:\\s+|$)').test(el.className); } private addClass(el: any, name: string) { if (!this.hasClass(el, name)) { el.className = el.className ? [el.className, name].join(' ') : name; } } private removeClass(el: any, name: string) { if (this.hasClass(el, name)) { el.className = el.className.replace(new RegExp('(?:^|\\s+)' + name + '(?:\\s+|$)', 'g'), ''); } } private onDrag(args) { let [e, el] = args; console.log(args); this.removeClass(e, 'ex-moved'); } private onDrop(args) { let [e, el] = args; this.addClass(e, 'ex-moved'); } private onOver(args) { let [e, el, container] = args; this.addClass(el, 'ex-over'); } private onOut(args) { let [e, el, container] = args; this.removeClass(el, 'ex-over'); }