How to use the @angular/cdk/coercion.coerceElement function in @angular/cdk

withElement(element: ElementRef | HTMLElement): this {
    // TODO: Workaround, see if we can push this through https://github.com/angular/material2/issues/15086
    (this as { -readonly [P in keyof PblDropListRef]: PblDropListRef[P] }).element = coerceElement(element);
    return this;
  }

}

    // Since the item may be in the `activeDraggables` already (e.g. if the user dragged it
    // into another container and back again), we have to ensure that it isn't duplicated.
    if (currentIndex > -1) {
      activeDraggables.splice(currentIndex, 1);
    }

    // Don't use items that are being dragged as a reference, because
    // their element has been moved down to the bottom of the body.
    if (newPositionReference && !this._dragDropRegistry.isDragging(newPositionReference)) {
      const element = newPositionReference.getRootElement();
      element.parentElement!.insertBefore(placeholder, element);
      activeDraggables.splice(newIndex, 0, item);
    } else {
      coerceElement(this.element).appendChild(placeholder);
      activeDraggables.push(item);
    }

    // The transform needs to be cleared so it doesn't throw off the measurements.
    placeholder.style.transform = '';

    // Note that the positions were already cached when we called `start` above,
    // but we need to refresh them since the amount of items has changed.
    this._cacheItemPositions();
    this.entered.next({item, container: this, currentIndex: this.getItemIndex(item)});
  }

_startScrollingIfNecessary(pointerX: number, pointerY: number) {
    if (this.autoScrollDisabled) {
      return;
    }

    let scrollNode: HTMLElement | Window | undefined;
    let verticalScrollDirection = AutoScrollVerticalDirection.NONE;
    let horizontalScrollDirection = AutoScrollHorizontalDirection.NONE;

    // Check whether we should start scrolling the container.
    if (this._isPointerNearDropContainer(pointerX, pointerY)) {
      const element = coerceElement(this.element);

      [verticalScrollDirection, horizontalScrollDirection] =
          getElementScrollDirections(element, this._clientRect, pointerX, pointerY);

      if (verticalScrollDirection || horizontalScrollDirection) {
        scrollNode = element;
      }
    }

    // Otherwise check if we can start scrolling the viewport.
    if (!verticalScrollDirection && !horizontalScrollDirection) {
      const {width, height} = this._viewportRuler.getViewportSize();
      const clientRect = {width, height, top: 0, right: width, bottom: height, left: 0};
      verticalScrollDirection = getVerticalScrollDirection(clientRect, pointerY);
      horizontalScrollDirection = getHorizontalScrollDirection(clientRect, pointerX);
      scrollNode = window;

private updateClass(): void {
    const element = coerceElement(this.element);
    if (!element) {
      return;
    }
    if (this.nzNoAnimation || this.animationType === 'NoopAnimations') {
      this.renderer.addClass(element, DISABLED_CLASSNAME);
    } else {
      this.renderer.removeClass(element, DISABLED_CLASSNAME);
    }
  }
}

withRootElement(rootElement: ElementRef | HTMLElement): this {
        const element = coerceElement(rootElement);
        this.rootElement = element;
        this.registerDragDropEvents();
        return this;
    }

withRootElement(rootElement: ElementRef | HTMLElement): this {
    const element = coerceElement(rootElement);

    if (element !== this._rootElement) {
      if (this._rootElement) {
        this._removeRootElementListeners(this._rootElement);
      }

      element.addEventListener('mousedown', this._pointerDown, activeEventListenerOptions);
      element.addEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);
      this._initialTransform = undefined;
      this._rootElement = element;
    }

    return this;
  }

private _handleScroll = () => {
    if (!this.isDragging()) {
      return;
    }

    const element = coerceElement(this.element);
    this._updateAfterScroll(this._scrollPosition, element.scrollTop, element.scrollLeft);
  }

? new Observable(observer => {
        const intersectionObserver = new IntersectionObserver(
          entries => {
            observer.next(entries);
          },
          { threshold },
        );
        intersectionObserver.observe(coerceElement(element));
        return () => {
          intersectionObserver.disconnect();
        };
      }).pipe(
        flatMap(entries => entries),

private _removeListeners() {
    coerceElement(this.element).removeEventListener('scroll', this._handleScroll);
    this._viewportScrollSubscription.unsubscribe();
  }