How to capture resize event of any DOM element in angular

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.

You can not resize is not available to HTML elements. It is triggered only on window. There is a proposal to make it available to elements as well but its not in yet. Read more developer.mozilla.org/en-US/docs/Web/API/Window/resize_event — Manish
– Manish, Commented Oct 18, 2019 at 5:56

Ankit Prajapati · Accepted Answer · 2019-10-18 05:56:44Z

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.

edited Oct 18, 2019 at 5:56

answered Oct 18, 2019 at 5:47

Ankit Prajapati

2,8303 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kandarp Over a year ago

As I understood, window changes only detected when the browser got resized. In my case browser size not get changed, only one <div> is getting resized, which doesn’t fire this event.

Ankit Prajapati Over a year ago

Yes @kandarp, but I have added one package details, you can add that package or copy the directive file in you package.

JuNe · Accepted Answer · 2019-10-18 05:38:28Z

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

answered Oct 18, 2019 at 5:38

JuNe

1,99514 silver badges30 bronze badges

1 Comment

JuNe Over a year ago

Should work. Example: stackblitz.com/edit/angular-dynamic-grid-list-cols-alprdz

Collectives™ on Stack Overflow

How to capture resize event of any DOM element in angular

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related