I have just learnt that the keyword "nativeElement" is not cross browser pliant, 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.

I have just learnt that the keyword "nativeElement" is not cross browser pliant, 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.

• javascript
• angular
• typescript
• dom-manipulation
• elementref

Share Improve this question Follow edited Jan 8, 2018 at 11:02 fool-dev 7,77799 gold badges4444 silver badges5656 bronze badges asked Jan 8, 2018 at 11:01 vicgoysovicgoyso 61611 gold badge1414 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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 ponent 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.

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.