CODEWITHSUNDEEP
htmlcssangularwidth
AlreadyLost
AlreadyLost

Reputation: 827

get width of css class in angular at run time

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

Upvotes: 0

Views: 2025

Answers (1)

Nugu
Nugu

Reputation: 848

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;
}

Upvotes: 1

Related Questions