How to observe when a element size changes in Angular 2

Question

What is the best way to do some action when the div in the template changes size? The size of the div changes when the window is resized. With Rxjs Observable/subscribe or are the some other way?

Template:

<div #eMainFrame class="main-frame">
   ...
</div>

Component:

@Component({
   selector: 'app-box',
   templateUrl: './box.component.html',
   styleUrls: ['./box.component.css']
})
export class BoxComponent implements OnInit {
   @ViewChild('eMainFrame') eMainFrame : ElementRef;

   constructor(){}

   ngOnInit(){
     // This shows the elements current size
     console.log(this.eMainFrame.nativeElement.offsetWidth);
   }
}

Updated component (this example detects when the window size is changed)

constructor(ngZone: NgZone) { 

   window.onresize = (e) => {
     ngZone.run(() => {
       clearTimeout(this.timerWindowResize);
       this.timerWindowResize = setTimeout(this._calculateDivSize, 100);
     });
   }
}

_calculateDivSize(){
   console.log(this.eMainFrame.nativeElement.offsetWidth); 
}

but this gives me an error:

EXCEPTION: Cannot read property 'nativeElement' of undefined

Have you tried element.resize? This might help: stackoverflow.com/questions/21170607/… — Rajesh Dixit
– Rajesh Dixit, Commented Mar 16, 2017 at 13:31

Günter Zöchbauer · Accepted Answer · 2017-03-16 13:36:57Z

12

The browser doesn't provide anything, therefore you need to poll the value

ngDoCheck() is called when Angular runs change detection. I think this is a good place to do the check:

ngDoCheck() {
  console.log(this.eMainFrame.nativeElement.offsetWidth);
}

If you only need to check once after component creation, use

ngAfterContentInit(){
  // This shows the elements current size
  console.log(this.eMainFrame.nativeElement.offsetWidth);
}

answered Mar 16, 2017 at 13:36

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

2 Comments

user3800924 Over a year ago

The ngDoCheck works but the ngDoCheck() will be called a lot of times.

Günter Zöchbauer Over a year ago

Every time change detection runs. It depends on your exact requirements and if there is an event that you can utilize for better timing when to read the size.

Collectives™ on Stack Overflow

How to observe when a element size changes in Angular 2

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related