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?

Answer 1

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

Answer 2

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

Answer 3

Today there is an "Angular" way of using the Document to query for Elements:

import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

class DOMService {
  constructor(@Inject(DOCUMENT) private document) {}

  getElementsByClass(clazz: string): HTMLCollection[] {
    return this.document.getElementsByClassName(clazz);
  }
}

Especially with Server-Side rendering Features for example its not recommended to access window directly (window && window.document..). In case you are also manipulating the Elements you should consider using Angulars Renderer2

In case you just need access to an Element inside your current Component you can use @ViewChild or ElementRef features.

Answer 4

I'm going to post this as another answer, instead of editing the old one, because IMHO both approaches are useful. But this is most definitely a much more "Angularish" one.

There's two Angularish-2 ways to get a reference to a template DOM element; ElementRef, and ViewChild. There may be more, but these are the two that get mentioned everywhere.

ElementRef is probably best to avoid. Evidently it opens you up to potential XSS attacks. There's all kinds of red "beware" around the docs.

So I settled on something that works really well, that being ViewChild.

My template:

<input #myinput type="text" />

Notice that wonky looking #myInput. It serves as an ID, but not a plain ol' DOM id=''. I assume this gets you around the unique IDs problem, as well as the ugly hack of tagging elements with empty CSS classes in lieu of IDs.

In your code: Note I use ES6 without annotations. but to get the same effect, you would use the @ViewChild annotation. It's well doc'd in TS (not in ES6 at all, it took me quite a while to piece it together).

FYI I had to figure out a clean way to do this because I wanted to implement an RxJS stream to do some debouncing and whatnot.

import { Component, ngOnInit, ViewChild } from '@angular/core';

class HomeComponent {
    constructor( ) {}

    ngOnInit ( ) {
        // .nativeElement console.log's out to what you'd expect.
        var inputBox = this.myInputRef.nativeElement;
        // left this in to demonstrate it works as plain ol' DOM elem,
        // if it didn't, this wouldn't work.
        var source = Rx.Observable.fromEvent(inputBox, 'click');
        ...
    }
}

HomeComponent.annotations = [
    new Component ( {
       templateUrl: './views/home/home.component.html',
       queries: { 'myInputRef': new ViewChild ( 'myinput' ) }
    } )
];
export { HomeComponent }

Works like a charm. About time we had something like this in Angular. JQLite really never cut it.