angularangular-cdk

How to set cdkDrag boundary dynamically in typescript

Here is the thing, I wonder if we can set cdkDrag boundary in typescript?

@Input() public container: any;

constructor(public el: ElementRef, private dragDropService: DragDrop) {
}


ngAfterViewInit(): void {
    var ckdDrag = this.dragDropService.createDrag(this.el);
    //TODO: how to set the ckdDrag boundary to this.container

}
Solution

  • Could you try the function withBoundaryElement.

    From Docs:

    withBoundaryElement

    Element to which the draggable's position will be constrained.
    Parameters: boundaryElement - HTMLElement | ElementRef
    Returns: this

    const dragRef: DragRef<any> = this.dragDropService.createDrag(
  this.dragable
);
dragRef.withBoundaryElement(this.container);

    Forked Stackblitz