Input reference to container element for mwlDraggable

Is your feature request related to a problem? Please describe

I need to populate the following property for both mwlDraggable and mwlDroppable.

@Optional() private scrollContainer: DraggableScrollContainerDirective

Currently it can be done by placing the mwlDraggableScrollContainer directive on the scrolling element. Using Ionic, my issue is that the scrolling element is not accessible because it is nested in a shadow-root and managed by ion-content. Because of this I can't add any directive to it (I guess). What I can do, is to get a reference to the scrolling element like already did with the following:

<ion-content #content>
    <div mwlDraggable [ghostElementAppendTo]="$any(content).el"></div>
</ion-content>

Describe the solution you'd like

I'd like to pass the scrollable element to do the mwlDraggableScrollContainer like this:

<ion-content #content mwlDraggableScrollContainer="$any(content).el">
    <div mwlDraggable [ghostElementAppendTo]="$any(content).el"></div>
</ion-content>

Describe your use case for implementing this feature

I guess something like this would do the trick:

@Directive({
  selector: '[mwlDraggableScrollContainer]',
})
export class DraggableScrollContainerDirective {

  @Input() mwlDraggableScrollContainer: HTMLElement;

  /**
   * @hidden
   */
  constructor(public elementRef: ElementRef<HTMLElement>) {}

  ngOnInit(){
    this.elementRef ||= new ElementRef(this.mwlDraggableScrollContainer);
  }
}

maybe it's a better idea to place it in ngOnChange.

By the way, it seems to currently work with this tricky solution:

<ion-content #content mwlDraggableScrollContainer [scrollEvents]="true" (ionScroll)="emitScrollEvent(content)">
</ion-content>

emitScrollEvent(content: IonContent) {
  const element = (content as any).el as HTMLElement;
  element.dispatchEvent(new CustomEvent('scroll'));
}

mattlewis92 / angular-calendar

Input reference to container element for mwlDraggable #1696