ViewChild/ ElementRef gets server side elements instances instead of client side.

[ktersius]

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.

[ktersius]

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

[clbond]

@ktersius Can you point me to a code example so that I can reproduce this?