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

לבני מלכה · Accepted Answer · 2018-04-25T05:23:11.727

7

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

edited Apr 25 '18 at 05:23

answered Apr 25 '18 at 05:11

לבני מלכה

15,925
2
23
47

1

Tell me if you need more help :) – לבני מלכה Apr 25 '18 at 05:13
Thanks but can you please modify the code in the above mentioned link to tell me the changes which you are saying – Jasleen Kaur Apr 25 '18 at 05:21
simply remove all `@HostListener()` and conect the function to the event for example `(mousedown)="onMouseDown($event)"` – לבני מלכה Apr 25 '18 at 05:37
like this
– Jasleen Kaur Apr 25 '18 at 05:37
Thanks that really works. But here the grabber class is resizing(move up and down) on placing the mouse over it ,what i should do if i want resizing to happen on clicking the grabber class – Jasleen Kaur Apr 25 '18 at 05:50
you have also `(resize)="func()"` – לבני מלכה Apr 25 '18 at 05:55
@JasleenKaur If you get your solution can you please update your code on stackblitz I need to check . – Pardeep Jain Apr 25 '18 at 06:14
@לבנימלכה (resize)="func()" is not working. Please specify how i can resize my div only on clicking on the grabber class not on hovering over the grabber class as you can see in visual studio code or any editor – Jasleen Kaur Apr 25 '18 at 10:57
Here is answer only border:https://stackoverflow.com/questions/30725607/is-there-any-way-to-bind-a-click-event-to-a-divs-left-border-in-jquery – לבני מלכה Apr 25 '18 at 11:10
@לבנימלכה Yes on grabbing the border, the div tag should be resizable. In your above link I,m not getting the resizable property .Please help – Jasleen Kaur Apr 25 '18 at 12:10
@JasleenKaur Here is answer:https://stackoverflow.com/questions/26233180/resize-div-on-border-drag-and-drop – לבני מלכה Apr 25 '18 at 12:14

score 6 · Answer 2 · answered Nov 13 '18 at 07:51

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;
  }
  }

angular 4+ horizontally resize div

2 Answers2