How to get offsetWidth and offsetHeight values after add css class to change them

Question

I have a Component which update css class

.slider-horizontal {
  width: 210px;
  height: 20px;
}

    import {Component, OnInit, Input, ViewChild, ElementRef, Renderer} from '@angular/core';
    export class SliderComponent implements OnInit {
      @ViewChild('picker') picker: ElementRef;

      constructor(private renderer: Renderer, private el: ElementRef) {

      }

      ngAfterViewInit() {
        this.renderer.setElementClass(this.picker.nativeElement, 'slider-horizontal', true);

        console.log(this.picker.nativeElement.offsetWidth);//old value 
        console.log(this.picker.nativeElement.offsetHeight);//old value
      }
    }

How do I get the new values which are changed after apply css?

Please provide a plunker demonstrating your problem.

micronyks
– micronyks

2017-01-17 04:36:46 +00:00
Commented Jan 17, 2017 at 4:36 — micronyks
– micronyks, Commented Jan 17, 2017 at 4:36

Owain van Brakel · Accepted Answer · 2017-01-17 05:05:34Z

1

I made a plnkr with a working example you can find it here: plnkr, however the results seem to be as expected:

So in my plunk it appears to be working...

Although I'm pretty sure the change detection is not running in your case you should try to invoke it manually.

Add this to your constructor

private changeDetectorRef: ChangeDetectorRef

So your constructor would look like this

constructor(private renderer: Renderer,
            private el: ElementRef,
            private changeDetectorRef: ChangeDetectorRef) {

}

And call the change detection like this:

ngAfterViewInit() {
  this.renderer.setElementClass(this.picker.nativeElement, 'slider-horizontal', true);

  this.changeDetectorRef.detectChanges();

  console.log(this.picker.nativeElement.offsetWidth);//old value 
  console.log(this.picker.nativeElement.offsetHeight);//old value
}

Now the values you'll see in the console should be fine.

answered Jan 17, 2017 at 5:05

Owain van Brakel

3,3591 gold badge17 silver badges22 bronze badges

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

3 Comments

yurzui Over a year ago

I think the detectChanges is reduntant here. Would be great if @loi mai provide a real example

Owain van Brakel Over a year ago

@yurzui i remember having issues with this before and manually invoking the change detection solved it (RC builds though) but indeed a code example would be really useful

loi mai Over a year ago

Thank you for your plnkr. That is exactly how my code look like. But I use angular-cli. Sometimes it í working correctly, but sometimes it is not. Also its width follows dynamically to web browsers window width when I do debug, I mean I changed the size of browser window while debugging. I add this.changeDetectorRef.detectChanges(); but no different.

Collectives™ on Stack Overflow

How to get offsetWidth and offsetHeight values after add css class to change them

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related