CDK Drag-Drop - Object Configuration on attributes

[KevynTD]

Feature Description

Implementing the possibility of elements with only one attribute and one object passing all the options, is more organized and easier to deploy.

Example:

<div [DragDropList]="{
listID: 'idlist1',
listConnectedTo: ['list2', 'list3', 'list4', 'list5'],
listData: list1,
listOrientation: 'horizontal',
listDropped: dropListDropped($event)
}" > ... </div>

<!-- OR --->

<div [DragDropList]="DragDropListConfigObj"> ... </div>

<!-- OR --->

<div [DragDropList]="{ listID: 'idlist1', ...DragDropListConfigObj }"> ... </div>

And another for the list elements:

<div [DragDropItem]="{
itemData: item,
itemDisabled: false,
itemMoved: dragMoved($event),
cdkDragReleased: dragReleased()
}" *ngFor="let item of list1; let item = i"> item </div>

<!-- OR --->

<div [DragDropItem]="DragDropListConfigObj" *ngFor="let item of list1; let item = i"> item </div>

Use Case

Facilitates the library learning curve and also enables easier and more organized changes. could be applicable on any Angular-Drag-Drop. I don't think it's hard to do, but if you want you wouldn't need to make a bigger effort to start a deployment method since the library already provides one.

[crisbeto]

The problem with doing this is that changes inside the object won't be picked up by change detection, unless the entire object is swapped out. Furthermore, it introduces a second way of doing the same things as before which can make the API confusing. We currently have the CDK_DRAG_CONFIG injection token that'll allow you to customize most of the options either for the entire app, or a subset of it.

[KevynTD]

Do you have any usage example please? I didn't find any

[crisbeto]

I'm sorry, my previous comment was wrong. It looks like we never got around to expanding the CDK_DRAG_CONFIG to support more options. I'll open a PR so that most of the input defaults can be changed through there.

[KevynTD]

Will this be like an object that I change the settings to use globally or in a specific dragdrop list without having to set the attributes in html !?

[crisbeto]

The object would allow you to set the default values for all the lists inside a module or a component. E.g. here's how you would make all lists default to being horizontal:

import {NgModule} from '@angular/core';
import {DragDropModule, CDK_DRAG_CONFIG} from '@angular/cdk/drag-drop';

@NgModule({
  imports: [DragDropModule],
  providers: [{
    provide: CDK_DRAG_CONFIG
    useValue: {
      orientation: 'horizontal'
    }
  }]
})
export class YourModule {}

[KevynTD]

Wow, this will make html much cleaner, especially when you have multiple lists with similar settings, let me know when you release this update please! It will be very good!
To overwrite I would just put the differences in the attributes right?

[crisbeto]

Correct, this object will only configure the defaults, but then you can use the inputs to change it on each instance. I can't guarantee when it'll be released, but you can keep an eye on the PR. #17970

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}