CODEWITHSUNDEEP
javascriptangularangular-components
Bruno Miguel
Bruno Miguel

Reputation: 1115

How to detect HTMLElement resize when width is set by percentage

I'm developing an Angular Component and i use this css code.

:host {
  display: block;
  width: 100%;
}

The ideia is to make the component as responsive as possible.

My problem is that i need to do some logic whenever my component width changes. The prefered way (MutationObserver) does not working with component width set by percentage because if the with changes it will be always 100% so the callback of the mutation observer doesnt get fired.

I read somewhere about putting the logic in the DoCheck licycle hook, can some one tell me if there are any other good way to do what i nedd?

Upvotes: 0

Views: 306

Answers (1)

Simone Boccato
Simone Boccato

Reputation: 189

I think you have two options:

  1. use the window.addEventListener('resize', reportWindowSize); At the first loading you have to save the original dimension of the div and when the window is resized, you check the original vs current dimension of the div and if it is changed do your custom logic.
  2. Follow this CSS Element Queries library described into that topic.

Upvotes: 1

Related Questions