如何在 angular 中捕获任何 DOM 元素的调整大小事件

Question

I have two components.

1st components contain a form with textara control, and the 2nd component contains an SVG graph. When user adds more detailed in textarea control and due to that form element get resized, however, I want to detect it to make my SVG graph aligned to that change.

<div id="comp1"> 
<form action="/action_page.php" id="usrform">

<textarea rows="4" cols="50" name="comment" form="usrform">
Enter text here...</textarea>
</form>
<div>

<div id="comp2">
</div>

I want to detect changes whenever comp1 get resized.

Answer 1

You can do that with the (window:resize) function.

<div id="comp1" (window:resize)="yourFunction($event)">  // <-- add this code fragment
<form action="/action_page.php" id="usrform">

<textarea rows="4" cols="50" name="comment" form="usrform">
Enter text here...</textarea>
</form>
<div>

<div id="comp2">
</div>

Answer 2

Angular provides HostListener Decorator that declares a DOM event to listen for, and provides a handler method to run when that window resize event occurs.

as below

import {HostListener} from '@angular/core';

class AppComponent{
@HostListener('window:resize', ['$event'])
  resize(event) {
    console.log(event);
 }
}

If you want to trigger an resize event on div resize then you can create custom directive as provided by https://www.npmjs.com/package/angular-resize-event package. You can use that package directly or copy the directive source code from here and use it in your project.