angular 4+ horizontally resize div

Question

I am new to angular 4 and I have been trying to create a resizable div (horizontally) but I am unable to achieve that. I want to click grab to resize the div. I want to resize the text area horizontally.Also in the below link the mouse events are applied on document,but i want the mouse events to be applied only on the grabber class click not on the document.Please help me out

Thanks.

I have tried this one https://stackblitz.com/edit/angular-text-resizable-zvp3ns?file=app%2Fapp.component.ts

Answer 1

Use (mousemove)="func()"

<div class="grabber" (mousemove)="func($event)" ></div> 

In your component add the function that you writed inside (mousemove)
Registers the event every time an item is dragged over this element

Here is the mouse events

(click) Checks for a single click; including the mouse clicking down, and then back up again

(mouseover) Registers when the cursor is over the element on which this attribute is applied

(mousedown) Will register the event when the mouse is clicked down, not needing to wait for the click to release

(mouseup) This event registers when the mouse click is released, so the click down doesn’t need to be done on the element itself

(dblclick) The double click event will register the event when it detects two mouse clicks in a short timeframe

(drag) Will register when the item is dragged

(dragover) Registers the event every time an item is dragged over this element

Answer 2

here I created horizontally(right to left) resizeable div using angular 6

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<style>
.textarea {
   min-height: 150px;
   border:1px solid #ddd;
   padding:15px;
   position:relative;
   width: 100px;
   float:right;
}
.textarea .grabber{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   margin-right: -15px;
   cursor: ew-resize;
   height: 100%;
   width: 10px;
   border-top: 1px solid #444;
   overflow: hidden;
   background-color: #444;
}
</style>

<div class="textarea"  [style.width.px]='width' contenteditable="true" >

  this is a text area

  <div class="grabber"  ></div> 

</div>`
 })

export class AppComponent  {
  name = 'Angular 6';
  width = 150;
  x = 100;
  oldX = 0;
  grabber = false;

  @HostListener('document:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    if (!this.grabber) {
        return;
    }
    this.resizer(event.clientX - this.oldX);
    this.oldX = event.clientX;
  }

  @HostListener('document:mouseup', ['$event'])
  onMouseUp(event: MouseEvent) {
    this.grabber = false;
  }
  resizer(offsetX: number) {
    this.width -= offsetX;
  }
  @HostListener('document:mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    this.grabber = true;
    this.oldX = event.clientX;
  }
  }