How I can access DOM element by selector

Question

In Angular2 is there way to get element by it's selector NOT in a template but inside whole DOM?

Solution 1

Sure, window.document.querySelector, or window.document.querySelectorAll.

Solution 2

It is not recommended to access the DOM directly in angular2, since your are bypassing the Angular2 renderer

You can use other angular 2 features to do that, for example: adding reference to this element.

Check out this issue, it can help you: How to get dom element in angular 2

Comments

[Tim Consolazio]

It's good to know that sort of thing, but over the years and after all the Angular code I've written, I've come to the mindset: if it's simple, readable, works, and can be tested, then there's nothing wrong with it. Angular makes doing some very simple things unbelievably painful, and if a plain ol' JS solution is superior in practicality and fits your need, then use it. After all, Angular is just one tool, it's not the final bible.

[HammerNL]

Downvote: I don't see how this answer provides an "Angular2-way" as requested by the OP

[Tim Consolazio]

The OP did not say "An Angular 2 Way". He just said "in Angular 2". Note that this has been the accepted answer for what...almost a year? And the OP upvoted it. Seriously...better ways to spend your time.

[Nacim Idjakirene]

i think the angular 2 way is more eadapter to the context, if i use Angular it is obvious that i need to do it the 'TheFrameworkIuse' WAY.

[Tim Consolazio]

I think that should be left up to the OP, who upvoted the answer. "Obvious" is often more relative than the individual believes.

[Drenai]

ViewChild is exactly the same as ElementRef btw

[Tim Consolazio]

Omg...no it isn't. Not even close (if it was they wouldn't bother with the other).

[Drenai]

Yip, it just a different way of getting the same object. The XSS warning are to do with updating/insererting elements into the DOM directily via nativeElement methods - as Angular does not get to apply it's 'sanitization' operators on the updated elements. It's a bit oversold though, as there are very few times you'd update the DOM with user supplied HTML. The Renderer2 and ViewChild/ViewContent systems are quite limited in many respects. Most npm modules/libraries in Angular access document/window if you have a look at the source

[Drenai]

e.g. github.com/angular/material2/blob/master/src/cdk/overlay/…

[Drenai]

You'll also notice in that link the use of _methodName for their private methods, which is one of the things we are also not suppose to do (from the styling conventions). Difference between best practice and practicality:-)

[Ian Steffy]

@TimConsolazio Questions with only tags referring to angular implies it should be an angular answer

[Tim Consolazio]

Interesting, I think you shouldn't hesitate to add related information if it assists the OP, which it appeared to. If you like I'll add another tag.