Angular Material - No provider for DropListRef

Question

I have a Angular 11 project and I want to use the drag and drop from Material.

It works well but I would like to customize it a bit.

I wanted to use the Class DropListRef to make the container horizontal as it seems that css does not work on the drag and drop module, at least, now how I want it.

But when I inject in the constructor the DropListRef, I have access to its method but I have an error that says that no provider is provided (pun intended) for it.

And when I put the DropListRef in the ngModule Provider array, it returns an error (as I understand it, Class are not supposed to be put in the provider).

Though I do not know how to make it work.

If someone can help me.

constructor(public contentService: ContentService, private papa: Papa, private dropListRef: DropListRef) {
     this.csvForm = new FormGroup({});
     this.dropListRef.withDirection('ltr').withOrientation('horizontal');
}

As requested, here is a StackBlitz with the issues :

https://stackblitz.com/edit/angular-ivy-9smng4?file=src%2Fapp%2Fapp.module.ts

If we remove the DropListRef from the providers, we get the second error.

Cheers

question from:https://stackoverflow.com/questions/65845356/angular-material-no-provider-for-droplistref

Answer 1

You can use the cdkDropListOrientation input from Angular Material - CdkDropList to set the orientation to horizontal.

@Input('cdkDropListOrientation')

orientation: DropListOrientation

Direction in which the list is oriented.

The drag and drop examples section include one for Drag&Drop horizontal sorting (Stackblitz) too. Note the css settings in the example too.

E.g. from the Stackblitz:

    <div cdkDropListOrientation="horizontal" cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo"
        [cdkDropListConnectedTo]="[doneList]" class="example-list" (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
    </div>