-
Notifications
You must be signed in to change notification settings - Fork 38
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ViewChild/ ElementRef gets server side elements instances instead of client side. #65
Comments
So for now I have solved this by getting all elements with a certain class and using the element whose dimensions are > 0. const elements = this.docRef.document.getElementsByClassName('browse-card-row');
let virtualWidth = 0;
for (let i = 0, len = elements.length; i < len; i++) {
const elem = elements[i];
if (elem.clientWidth > 0) {
virtualWidth = elem.clientWidth;
}
} |
@ktersius Can you point me to a code example so that I can reproduce this? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If you inject any elements into your component with ViewChild or ElementRef the nativeElements are the hidden server side rendered elements instead of the client side rendered elements.
This happens because the components are instantiated before preboot can clean up the DOM to give the user a nice transition from server to client rendered html.
I suspect angular assumes there are only one instance of specific DOM elements and then selects the first one in the DOM which are in fact at this point in time the hidden server side rendered elements.
ANOTHER possibility is that it's getting the correct elements but because they are display:none they have no heights etc.
The text was updated successfully, but these errors were encountered: