Angular-resize-event not working for textarea

Question

I want to check the width and height of <textarea> as I resize it in real time not after I release the click so I tried to use Angular-resize-event. But its not working out it seems like this is only applicable to <div> not <textarea>. I also tried to wrap<textarea> in<div> but this does not work only the Height parameter changes but the width remains same . Why is it so ? Is there another way to do this ? her is my code :

HTML

     <div (resized)='onResize($event)'><textarea #resizable></textarea>      
     </div>
<div><span> HEIGHT : {{height}} </span> WIDTH : {{width}} </div>

Component.ts

  import { Component, ViewChild, ElementRef } from '@angular/core';
import { ResizedEvent } from 'angular-resize-event';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  @ViewChild('resizable') box: ElementRef ;



  onResize(event:ResizedEvent) {
    this.height =  event.newHeight;

    this.width = event.newWidth;
    }


}

wentjun · Accepted Answer · 2019-06-10T16:34:00.777

2

The reason why it is not detecting a change in width on your parent <div>, is because, the parent <div>'s width seems to be set as 100% by default. You will need to use the css property display, and set the value as inline-block.

<div (resized)="onResize($event)" style="display:inline-block">
  <textarea #resizable></textarea>      
</div>

With that, the resized event should be able to capture changes in both width and height!

I have forked and re-created the demo for you over here. Hope it solves your problem.

edited Jun 10 '19 at 16:34

answered Jun 10 '19 at 16:27

wentjun

40,384
10
95
107

But why can't I use it directly in `` ? – sid597 Jun 10 '19 at 16:29
@johnsmith Hmm.. I have no idea why. It seems like that library only works on `
` element?
– wentjun Jun 10 '19 at 16:31
Ok , so is there a workaround that if I want to do it for `` ? I was thinking of implementing a function which after a few milliseconds look for change in width and height of `<textarea>` but I dont know how to implement it . – sid597 Jun 10 '19 at 16:33
Hmm.. In that case, you might want to create your own directive, and use `HostListener`. You might find an answer here https://stackoverflow.com/questions/47158863/html-textarea-resize-event-with-angular – wentjun Jun 10 '19 at 16:36

Angular-resize-event not working for textarea

1 Answers1