Just wanted to share my experience in case it helps someone else out there!
I've been working on an Angular project where I needed to create a Trello-like application. To enable dragging elements from one list to another, I installed the Angular cdk module and followed their guide.
https://i.sstatic.net/FF0S8.png
IMPORTANT: My application consists of multiple pages/components, and the page where I'm implementing the Trello interface is called BoardPageComponent.
Initially, I added the cdkDrag directive to make the element draggable, which was a good start.
However, when I added the cdkDropList directive to the parent element, the style of the children elements no longer worked properly while being dragged!
Resolution
During drag-and-drop operations within a cdkDropList, the DragAndDropModule creates a clone of the element at the document's body level. This can cause styling issues if your component is encapsulated.
Solution 1: An easy fix would be to move the styles of the draggable element to the global stylesheet.
Solution 2: Alternatively, you could disable encapsulation for that component using ViewEncapsulation.None:
@Component({
selector: 'app-board-page',
templateUrl: './board-page.component.html',
styleUrls: ['./board-page.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class BoardPageComponent implements OnInit, OnDestroy {
....
}
While this solution works, remember that it might expose some styles to other components in your application. Make sure to handle component styling carefully.
Is there perhaps another approach we're missing?