How to perform change detection on div resizing

resize angular angular2-changedetection
Michael Burger picture Michael Burger · Apr 18, 2016 · Viewed 46k times · Source

I use Bootstrap for my layout and I need to check if the automatic calculated size of my div with bootstrap for example width = 25% is changed.

How to perform change detection on a attribute which I don't set in my template, but is set by Bootstrap?

(window:resize) is not enough.

Answer

Mark Rajcok picture Mark Rajcok · Apr 18, 2016

You can add a directive to the div and implement lifecycle hook ngDoCheck() to perform your own change detection logic. You'll need to inject ElementRef:

constructor(private _elRef:ElementRef) {}
ngDoCheck() {
   // use ElementRef to examine the div property of interest

If the div is inside a component template, add a local template variable

<div #myDiv ...>

Then use @ViewChild() to get a reference to the div and implement lifecycle hook ngDoCheck() or ngAfterViewChecked() to perform your own change detection logic. 

@ViewChild('myDiv') theDiv:ElementRef;
ngAfterViewChecked() {
   // use this.theDiv to examine the div property of interest

Note that ngDoCheck() and ngAfterViewChecked() will be called every time change detection runs. See also the dev guide Lifecycle Hooks.

Related questions

How to resize an Image C#

As Size, Width and Height are Get() properties of System.Drawing.Image; How can I resize an Image object at run-time in C#? Right now, I am just creating a new Image using: // objImage is the original Image Bitmap objBitmap = …

Read More
How to resize an image with OpenCV2.0 and Python2.6

I want to use OpenCV2.0 and Python2.6 to show resized images. I used and adopted this example but unfortunately, this code is for OpenCV2.1 and does not seem to be working on 2.0. Here my code: import os, glob import cv …

Read More
jquery $(window).width() and $(window).height() return different values when viewport has not been resized

I am writing a site using jquery that repeatedly calls $(window).width() and $(window).height() to position and size elements based on the viewport size. In troubleshooting I discovered that I am getting slightly different viewport size reports in repeated …

Read More