Adjusting the width of a div element horizontally in Angular 4 and

Question

Adjusting the width of a div element horizontally in Angular 4 and

As someone new to Angular 4, I've been attempting to create a resizable div (horizontally) without success. My goal is to be able to click and drag a grabber to resize the text area horizontally. However, in the example provided in the link below, the mouse events are applied on the document, whereas I want them to only be triggered when clicking on the grabber class. Can anyone assist me with achieving this?

Thanks.

I have already attempted the solution provided here: https://stackblitz.com/edit/angular-text-resizable-zvp3ns?file=app%2Fapp.component.ts

html css angular

Answer 1

Answer №1

To implement mouse events, use the following syntax:

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

Inside your component, add the function you wrote within the (mousemove) event handler.
This will register the event every time an item is dragged over this element.

Below are various mouse events and their descriptions:

(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

To implement mouse events, use the following syntax:

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

Inside your component, add the function you wrote within the (mousemove) event handler.
This will register the event every time an item is dragged over this element.

Below are various mouse events and their descriptions:

(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 3

Answer №2

Learn how to create a horizontally resizable div from right to left with 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;
  }
  }

Answer 4

Learn how to create a horizontally resizable div from right to left with 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;
  }
  }

Adjusting the width of a div element horizontally in Angular 4 and

Answer №1

Answer №2

Similar questions

Easily toggle between various image source paths

I am looking to incorporate two YouTube videos into an HTML webpage, each in a different language. I would like to provide the option for users to select the language, even though the content

Display the modal in Angular 8 only after receiving the response from submitting the form

How to eliminate the space between text and list-style-image in CSS

Utilize Angular to Transfer HTTP Array Data from a Service to a Component

What is causing my auth0 token to expire upon refreshing the page or clicking a link in my Angular application?

Setting various font sizes for a single element

Combining Versioning with BundleConfig.cs: A Comprehensive Guide

Tips for incorporating Action Links into your CSS workflow

Tips on aligning data received as a response from a Perl script

Angular 6 - Build a dynamic single page housing various applications within

Customizing a material-ui theme with withStyles() in conjunction with withTheme()

Looking for assistance with an Angular2 post request?

How to conceal hyperlink underline with css

Ionic 6 prioritizes enhanced accessibility by implementing toast blocks that divert attention away from input fields

Effortlessly control your CSS within extensive Angular 2/4/5 projects

Although there may be some issues with tslint, the functionality is operating smoothly

Triggering a click event on various instances of a similar element type using the onclick function

Displaying the Price of a Product in a Different Location on Your Wordpress Site

Using Jquery to load a css background image with a loader