get width of css class in angular at run time

Question

I need to get the width of a css class in my angular component at the run time

<div class="document-section"></div>

I can't seems to get it by trying any of these:

$('.document-section').width()
$('.document-section').attr('width')

with error

Uncaught TypeError: $(...).width is not a function at :1:22

Can anyone help me with this? Thank you

Could be conflicts. stackoverflow.com/questions/28064784/… — Gezzasa
– Gezzasa, Commented May 18, 2017 at 6:08
I am not setting the width to use .css('width', '200px') even I tried $('.document-section').css('width') and same error as above — AlreadyLost
– AlreadyLost, Commented May 18, 2017 at 6:11

Nugu · Accepted Answer · 2017-05-18 08:04:12Z

1

To get the width of the class at runtime you need to first make sure it is drawn/rendered in the view.

So whatever your code to get the width should be included in the ngAfterViewInit() life cycle hook.

You dont specifically need to get it from css class just use ViewChild in the div and get it's width.

HTML

<div #documentSection class="document-section"></div>

TS

@ViewChild("documentSection")
private documentSection: ElementRef;

private divWidth: number;

public ngAfterViewInit(): void {
   this.divWidth = this.documentSection.nativeElement.offsetWidth;
}

edited May 18, 2017 at 8:04

answered May 18, 2017 at 6:21

Nugu

8587 silver badges10 bronze badges

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

2 Comments

AlreadyLost Over a year ago

can you help me more with the ViewChild in the div?

Nugu Over a year ago

Added a small example

Collectives™ on Stack Overflow

get width of css class in angular at run time

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related