nativeElement object, DOM manipulation

Question

I have just learnt that the keyword "nativeElement" is not cross browser compliant, e.g.:

let whatever = <HTMLDivElement>this.$elementRef.nativeElement;
whatever.style.display = 'none';

which is now corrected by using the render method like so.

this._render.setElementClass(whatever, 'display', 'none');

However I also have the following:

this.whatever = <HTMLDivElement>this.$elementRef.nativeElement.querySelector(".myLookupClass");

Please advise if in this instance

".nativeElement.querySelector(".myLookupClass")" works cross browser? If not please advise an alternative technique.

Thanks in advance.

Answer 1

Your code will work on cross browser. First you need to understand what actually gives angular to you when you write following code:

this.$elementRef.nativeElement

Angular will give you the reference of your component which rendered on DOM. It means Angular gives a plain javascript object and you can play with this object at any browser. SO go ahead and use your code. This will be supported on any browser.

Answer 2

nativeElement is not related to "cross-browser", but to "cross-platform" where "platform" is DOM thread, Web Worker thread, server side-rendering, ...

If you want to utilize Web Worker features provided by Angular, or server side rendering (Angular Universal), you should or need to avoid accessing any properties or methods of nativeElement. Passing nativeElement around (like to Renderer2 methods is fine though).

As mentioned in the other answer, the nativeElement returns the DOM element and this won't be available in platforms that are not the browsers DOM thread.

If your application only utilizes the browsers DOM thread, there is no specific benefit of avoiding access to nativeElement... properties and methods except that preventing you from utilizing other platforms later.