title: angular cdk drag and drop + resize
body: <p>i have a code like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div
      cdkDropList
      id="{{executor.id}}-{{i}}"
      [cdkDropListData]="date.tasks"
      (cdkDropListDropped)="drop($event, date.date, executor)"
      [cdkDropListConnectedTo]="allDropLists"
      class="dropListDate"&gt;
    &lt;div
        *ngFor="let item of date.tasks"
        class="drag-me"
        cdkDrag
        (cdkDragEntered)="enterListContainer($event)"
        [cdkDragData]="item"
        resizable&gt;
      &lt;app-plan-task [task]="item" [list]="true" cdkDragHandle&gt;&lt;/app-plan-task&gt;
      &lt;div class="resize-drag-task" grabber&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>resizable directive</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>class Resizable {
    _host: HTMLElement;
    _startWidth = 0;
    constructor(private elm: ElementRef) { }
  
    ngOnInit() {
      this._host = this.elm.nativeElement;
    }
  
    dragStart() {
      console.log('START')
  
      const style = window.getComputedStyle(this._host, undefined);
      this._startWidth = style.width ? parseInt(style.width, 10) : 0;
    }
  
    dragging(diff: number) {
      this._host.style.width = this._startWidth + diff + 'px';
    }
  
    dragEnd() {
      console.log('END')
      this._startWidth = 0;
    }
  }
  </code></pre>
  
  <p><strong>grabber directive</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>class Grabber {
  
    @HostListener('mousedown', ['$event'])
    mousedown = (e: MouseEvent) =&gt; {
      this._startOffsetX = e.clientX;
      document.addEventListener('mousemove', this._boundDragging);
      document.addEventListener('mouseup', this._boundDragEnd);
      this.resizable.dragStart();
    };
  
    _startOffsetX = 0;
  
    readonly _boundDragging = (e) =&gt; this._dragging(e);
  
    readonly _boundDragEnd = (e) =&gt; this._dragEnd(e);
  
    constructor(
      private elm: ElementRef,
      @Host() @SkipSelf() private resizable: ResizableDirective
    ) {
    }
  
    private _dragging(e: MouseEvent) {
      const diff = e.clientX - this._startOffsetX;
      this.resizable.dragging(diff);
    }
  
    private _dragEnd(e: MouseEvent) {
      this._startOffsetX = 0;
      document.removeEventListener('mousemove', this._boundDragging);
      document.removeEventListener('mouseup', this._boundDragEnd);
      this.resizable.dragEnd();
    }
  }
  </code></pre>
  
  <p>As you can see I have multiple "tables" with vertical dnd. Now I need to resize each item of 'em and if it's been resized, it must to be copied to a new array and get it's index. But in practice I can't handle an DragEvent when I click on "grabber", cause it doesn't have a cdkDragHandle. So how I can programmatically set this event to grabber wherein I don't want to drag it, just take start/move/end events for get positions of resized elements.</p>
  
  <p>And it may looks like:
  <a href="https://cdn1.savepice.ru/uploads/2019/2/8/0426296ca859446d6a92f569bca34826-full.png" rel="nofollow noreferrer">https://cdn1.savepice.ru/uploads/2019/2/8/0426296ca859446d6a92f569bca34826-full.png</a></p>