Get Document Height in Angular 2

Question

I need to convert some jQuery code to Angular 2 and am having some trouble figuring out how to get the height of the document.

The jQuery code I have used is

$(document).height();

How would I achieve this in Angular 2?

Thanks

Possible duplicate of [How to get height of entire document with JavaScript?](http://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript) — Rashid, Jan 05 '17 at 10:30
Thank you everyone for your help. After further research I believe I have found the solution to be `document.body.scrollHeight`. This code a height value regardless of the height of the window. — Jonathan Hutchinson, Jan 05 '17 at 12:34

kind user · Answer 1 · 2017-01-05T11:07:08.237

4

Using document.height doesn't work in angular 2 aswell as in the console.

console.log(window.outerHeight);
console.log(window.innerHeight);
console.log(screen.height);

edited Jan 05 '17 at 11:07

answered Jan 05 '17 at 10:39

kind user

Unfortunately these all return the window height rather than the document height which should not vary depending on the window height. – Jonathan Hutchinson Jan 05 '17 at 11:04
@JonathanHutchinson I've edited my post, check these options and let me know if it works for you. These functions doesn't vary on the window/browser height.The value they return is static. – kind user Jan 05 '17 at 11:13
Thanks @K. Daniek but unfortunately none of these work. Both `screen.height` and 'window.innerHeight` return the window height and 'window.outerHeight` returns the height of the browser window (it changes if you reduce the height from full screen). There is a div.container-fluid element which I think matches the height of the document. Do you know how I could reference this in Angular2? – Jonathan Hutchinson Jan 05 '17 at 11:57
@JonathanHutchinson But what exactly do you want to achieve? I've given you like all ways to get the height of all screens or windows. What else? – kind user Jan 05 '17 at 13:13
1

I needed a way of returning the document height which should remain static regardless of the height of the window. I achieved this with `document.body.scrollHeight`. Thanks for your help :) – Jonathan Hutchinson Jan 06 '17 at 16:26
@JonathanHutchinson That's cool. I'm in need of rep points. If you would upvote, would be great. – kind user Jan 06 '17 at 16:31

Günter Zöchbauer · Answer 2 · 2017-01-05T10:44:45.130

1

What about just using document.height without jQuery?

~~document.height~~

This worked in the Plunker

document.documentElement.clientHeight

edited Jan 05 '17 at 10:44

answered Jan 05 '17 at 10:24

It doesn't work. Tried to do it in angular 2 and simply in the console. Neither of them worked – kind user Jan 05 '17 at 10:33
`document.documentElement.clientHeight` returns a value, however this varies depending on the height of the window suggesting this is the window height rather than the height of the actual document. What I need is the height of the document which should not change on account of the window height. – Jonathan Hutchinson Jan 05 '17 at 11:02
Then it's probanly `document.body.clientHeight` what you want – Günter Zöchbauer Jan 05 '17 at 11:58
Thanks @Günter Zöchbauer but again it seems to return the window size and not the full document – Jonathan Hutchinson Jan 05 '17 at 12:33

2 Answers2