Is there any 'passive' way to get element style from @ViewChild style dynamically in Angular2?

Question

For example, there is an element in the template using a local variable #targetElement which aims to get its current width whenever it needs. But I don't want to programmatically calculate the style. Tried with a setter with @ViewChild annotation

get: to get the style from the template

set: to set the value to the component

@ViewChild('targetElement')
set imgWidth(content: ElementRef) {
  if (content) {
    console.log('Current width is: ' + content.nativeElement.clientWidth);
  }
}

But it can only get a 0 and it won't update when the page is resized, or any change to the window. So, the question is how I can passively set the #targetElement into my component in anytime?

Write a setter in ngDoCheck or ngAfterViewChecked seems killing the performance.

You want to get or you want to set? The question is not clear to me. Maybe showing the template could help. — ConnorsFan, Aug 15 '18 at 15:20
Your setter is called one time when creating the component. It will not be called if something inside of content var changes. That's why your log output is always 0. Are you looking for something like this https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed ? — Christoph Lütjen, Aug 15 '18 at 15:23
@ConnorsFan get: to get the style from the template, set: to set the value to the component — Vincent, Aug 15 '18 at 15:34
Thanks @ChristophLütjen I will look into the plugin implementation. But I still want to see if there is a method in pure Angular — Vincent, Aug 15 '18 at 15:37
If you want to get notified when size changes, there's nothing build in in angular (I was looking for it too). I'm using the ResizeObserver polyfill https://github.com/que-etc/resize-observer-polyfill — Christoph Lütjen, Aug 15 '18 at 15:40
what type of element is this ? maybe you can write a custom function which emits an event for example in case of a button `
` and then in the function `@ViewChild('targetElement') el:ElementRef ` `setImageWidth()` `{` `console.log( this.elementView.nativeElement.offsetHeight);` `}` — Vaibhav, Aug 15 '18 at 15:58

score 1 · Accepted Answer · answered Aug 15 '18 at 15:53

You can use resizeObserver

Resize Observer is a new JavaScript API that’s very similar to other observer APIs like the Intersection Observer API. It allows for elements to be notified when their size changes.

Install polyfill that may be used for browsers back to Internet Explorer 11

npm i resize-observer-polyfill

var observer = new ResizeObserver( resizeObserverEntries => {
    for (let entry of resizeObserverEntries) {
        const rect = entry.contentRect;
        console.log('Element:', entry.target);
        console.log(`Element size: ${rect.width}px x ${rect.height}px`);
        console.log(`Element padding: ${rect.top}px ; ${rect.left}px`);
    }
});

StackBlitz:https://stackblitz.com/edit/resize-observer

ResizeObserver: It’s Like document.onresize for Elements Documentation:https://developers.google.com/web/updates/2016/10/resizeobserver Check this:https://www.sitepen.com/blog/2018/06/04/exploring-the-resize-observer-proposal/

Is there any 'passive' way to get element style from @ViewChild style dynamically in Angular2?

1 Answers1