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

Can the functions passed into Material-UI withStyles() be relocated within the component?

Distinguishing between web development, frontend, and backend: Identifying ownership of an entity by a user

Footer suffering from image invisibility syndrome

Utilizing Javascript / jQuery to eliminate specific CSS styles

Leveraging the information retrieved from Promise.all calls

"Delve into the art of utilizing negative space between elements with

What is the proper method for utilizing the --force flag in npm install when carrying out a Visual Studio publishing procedure?

Executing functions in a loop using Angular

Tips for maintaining a website within a 960px width while stretching the background on the x-axis

Foundational 5 Grid Shuffle Shift

Executing Javascript code from a specified web address

How to use attributes in Angular 2 when initializing a class constructor

Unable to open modal window in Angular 14 micro-frontend application

"Using Flexbox to Align Child Elements of Varying

Troubles with Iframe in Selenium using Python

I'm running into some issues when it comes to uploading and launching my website through cPanel on Namecheap

Switch Between Different Background Colors for Table Rows With Each Click

Building powerful web applications using Angular 2 CLI and Express.js

Guide to dynamically generating checkboxes or multi-select options in ASP.NET MVC 4

Is there a way to configure my dropdown menu so that only one dropdown can be open at a time and it remains open when clicking on a <li> item?