Does anybody know how to get hold of an element defined in a component template? Polymer makes it really easy with the $ and $$.

I was just wondering how to go about it in Angular.

Take the example from the tutorial:

import {Component} from '@angular/core'

@Component({
    selector:'display'
    template:`
     <input #myname(input)="updateName(myname.value)"/>
     <p>My name : {{myName}}</p>
    `

})
export class DisplayComponent {
    myName: string = "Aman";
    updateName(input: String) {
        this.myName = input;
    }
}

How do I catch hold of a reference of the p or input element from within the class definition?

9 Answers 11

up vote 136 down vote accepted

You can get a handle to the DOM element via ElementRef by injecting it into your component's constructor:

constructor(myElement: ElementRef) { ... }

Docs: https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

1 upvote
  flag
@Brocco can you update your answer? I'd like to see a current solution since ElementRef is gone. – Jefftopia
17 upvote
  flag
ElementRef is available (again?). – Günter Zöchbauer
2 upvote
  flag
SECURITY RISK via XSS – sandeep talabathula
upvote
  flag
@sandeeptalabathula - please explain? – user230910
5 upvote
  flag
link Use this API as the last resort when direct access to DOM is needed. Use templating and data-binding provided by Angular instead. Alternatively you take a look at Renderer which provides API that can safely be used even when direct access to native elements is not supported. Relying on direct DOM access creates tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a web worker. – sandeep talabathula
upvote
  flag
@sandeeptalabathula What is a better option for finding an element to attach a floating date picker component from a third-party library to? I'm aware that this wasn't the original question, but you make it out that finding elements in the DOM is bad in all scenarios... – john
upvote
  flag
@john In my perspective, better option would be to create a custom angular2 ts component (an adapter to 3rd party lib) and use it as reusable throughout your app. I did for dialogs, flyouts etc,. – sandeep talabathula
upvote
  flag
@sandeeptalabathula That's what I've been doing, but it needed me to pass a DOM element to it. – john
10 upvote
  flag
@john Ah.. okay. You may try out this - this.element.nativeElement.querySelector('#someElementId') and pass ElementRef to the constructor like this.. private element: ElementRef, Import lib... import { ElementRef } from '@angular/core'; – sandeep talabathula
import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
  selector:'display',
  template:`
   <input (input)="updateName($event.target.value)">
   <p> My name : {{ myName }}</p>
  `
})
class DisplayComponent implements OnInit {
  constructor(public element: ElementRef) {
    this.element.nativeElement // <- your direct element reference 
  }
  ngOnInit() {
    var el = this.element.nativeElement;
    console.log(el);
  }
  updateName(value) {
    // ...
  }
}

Example updated to work with the latest version

For more details on native element, here

Instead of injecting ElementRef and using querySelector or similar from there, a declarative way can be used instead to access elements in the view directly:

<input #myname>
@ViewChild('myname') input; 

element

ngAfterViewInit() {
  console.log(this.input.nativeElement.value);
}

Plunker example

  • @ViewChild() supports directive or component type as parameter, or the name (string) of a template variable.
  • @ViewChildren() also supports a list of names as comma separated list (currently no spaces allowed @ViewChildren('var1,var2,var3')).
  • @ContentChild() and @ContentChildren() do the same but in the light DOM (<ng-content> projected elements).

descendants

@ContentChildren() is the only one that allows to also query for descendants

@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField; 

{descendants: true} should be the default but is not in 2.0.0 final and it's considered a bug
This was fixed in 2.0.1

read

If there are a component and directives the read parameter allows to specify which instance should be returned.

For example ViewContainerRef that is required by dynamically created components instead of the default ElementRef

@ViewChild('myname', { read: ViewContainerRef }) target;

subscribe changes

Even though view children are only set when ngAfterViewInit() is called and content children are only set when ngAfterContentInit() is called, if you want to subscribe to changes of the query result, it should be done in ngOnInit()

https://github.com/angular/angular/issues/9689#issuecomment-229247134

@ViewChildren(SomeType) viewChildren;
@ContentChildren(SomeType) contentChildren;

ngOnInit() {
  this.viewChildren.changes.subscribe(changes => console.log(changes));
  this.contentChildren.changes.subscribe(changes => console.log(changes));
}

direct DOM access

can only query DOM elements, but not components or directive instances:

export class MyComponent {
  constructor(private elRef:ElementRef) {}
  ngAfterViewInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }

  // for transcluded content
  ngAfterContentInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }
}

get arbitrary projected content

See Access transcluded content

8 upvote
  flag
The angular teams advised against using ElementRef, this is the better solution. – Honorable Chow
5 upvote
  flag
Actually input also is an ElementRef, but you get the reference to the element you actually want, instead of querying it from the host ElementRef. – Günter Zöchbauer
11 upvote
  flag
Actually using ElementRef is just fine. Also using ElementRef.nativeElement with Renderer is fine. What is discouraged is accessing properties of ElementRef.nativeElement.xxx directly. – Günter Zöchbauer
upvote
  flag
I need to change the className of a child element (html element inside the template) of the component. I made this way: constructor(private myElement: ElementRef)... ngOnInit() { var el = this.myElement.nativeElement; el.children[0].className = 'new-class-name'; }. Is it correct? I was not able to retrieve the element using @ViewChild(). – Natanael
upvote
  flag
Günter, where is is said it's discouraged? – Natanael
2 upvote
  flag
@Natanael I don't know if or where this is explicitly documented but it is mentioned regularly in issues or other discussions (also from Angular team members) that direct DOM access should be avoided. Accessing the DOM directly (which is what accessing properties and methods of ElementRef.nativeElement) is, prevents you from using Angulars server side rendering and WebWorker feature (I don't know if it also breaks the upcoming offline template compiler - but I guess not). – Günter Zöchbauer
upvote
  flag
In some situations I need to define a value to an property like a class without use binding because binding can avoid other libraries to change the elements properties. The only way I found to do this is via direct property edition. – Natanael
upvote
  flag
You can do that. You just need to be aware of the disadvantages though. – Günter Zöchbauer
8 upvote
  flag
As mentioned above in the read section, if you want to get the nativeElement for an element with ViewChild, you have to do the following: @ViewChild('myObj', { read: ElementRef }) myObj: ElementRef; – jsgoupil
upvote
  flag
I have found that using a ViewChild setter works reliably: //allinonescript.com/a/39679241/882912 – KTCO
upvote
  flag
This is a good description of ViewChild - However the question is asking how to get the <p> element - In jQuery we could do $('p') or $(input).next('p'), how do we do this in Angular 2? How do we get the DOM element from the ViewChild? – Luke T O'Brien
upvote
  flag
You can add a template variable and use @ViewChild('varName') or inject ElementRef and use this.elRef.nativeElement.querySelector('p') – Günter Zöchbauer
upvote
  flag
@GünterZöchbauer, if you want to subscribe to changes of the query result, it should be done in ngOnInit() - I assume it's not yet implemented, correct? In ngOnInit the viewchildren property is not yet initialized – AngularInDepth.com
upvote
  flag
I saw these comments, not exactly sure what they mean. – Günter Zöchbauer
upvote
  flag
Could you please extend your answer with JavaScript example? – vagran
1 upvote
  flag
@vagran Sorry, I haven't even tried Angular2 with JS. – Günter Zöchbauer
1 upvote
  flag
OK, figured out myself how to do it. Need to add this code to component descriptor block: queries: { "input": new ng.core.ViewChild("myname")} – vagran
upvote
  flag
Sorry, but I don't understand the comment. What exactly have you tried and what did not work with that approach? – Günter Zöchbauer
upvote
  flag
How to get a hold of a native element from within a ContentChild? Tried with @ContentChild(SomeComponent, { read: ElementRef }) but it did not work. It complained with Can't construct a query for the property ... of ... since the query selector wasn't defined – superjos
upvote
  flag
(I mean, beside trashing @ContentChild and turning to discouraged ElementRef.nativeElement.querySelector()) – superjos
upvote
  flag
That should work. Can you teproduce in a Plunker? – Günter Zöchbauer
upvote
  flag

For people trying to grab the component instance inside a *ngIf or *ngSwitchCase, you can follow this trick.

Create an init directive.

import {
    Directive,
    EventEmitter,
    Output,
    OnInit,
    ElementRef
} from '@angular/core';

@Directive({
    selector: '[init]'
})
export class InitDirective implements OnInit {
    constructor(private ref: ElementRef) {}

    @Output() init: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();

    ngOnInit() {
        this.init.emit(this.ref);
    }
}

Export your component with a name such as myComponent

@Component({
    selector: 'wm-my-component',
    templateUrl: 'my-component.component.html',
    styleUrls: ['my-component.component.css'],
    exportAs: 'myComponent'
})
export class MyComponent { ... }

Use this template to get the ElementRef AND MyComponent instance

<div [ngSwitch]="type">
    <wm-my-component
           #myComponent="myComponent"
           *ngSwitchCase="Type.MyType"
           (init)="init($event, myComponent)">
    </wm-my-component>
</div>

Use this code in TypeScript

init(myComponentRef: ElementRef, myComponent: MyComponent) {
}
 */
import {Component,ViewChild} from '@angular/core' /*Import View Child*/

@Component({
    selector:'display'
    template:`

     <input #myname (input) = "updateName(myname.value)"/>
     <p> My name : {{myName}}</p>

    `
})
export class DisplayComponent{
  @ViewChild('myname')inputTxt:ElementRef; /*create a view child*/

   myName: string;

    updateName: Function;
    constructor(){

        this.myName = "Aman";
        this.updateName = function(input: String){

            this.inputTxt.nativeElement.value=this.myName; 

            /*assign to it the value*/
        };
    }
}
4 upvote
  flag
Please provide some explanation to this code. Simply code dumping without explanation is highly discouraged. – rayryeng
2 upvote
  flag
This won't work: attributes set via @ViewChild annotations will only be available after ngAfterViewInit lifecycle event. Accessing the value in the constructor would yield an undefined value for inputTxt in that case. – David M.

I would like to add that if you are using ElementRef, as recommended by all answers, then you will immediately encounter the problem that ElementRef has an awful type declaration that looks like

export declare class ElementRef {
  nativeElement: any;
}

this is stupid in a browser environment where nativeElement is an HTMLElement.

To workaround this you can use the following technique

import {Inject, ElementRef as ErrorProneElementRef} from '@angular/core';

interface ElementRef {
  nativeElement: HTMLElement;
}

@Component({...}) export class MyComponent {
  constructor(@Inject(ErrorProneElementRef) readonly elementRef: ElementRef) { }
}
1 upvote
  flag
This explains a problem I was having. This doesn't work because it'll say item needs to be an ElementRef, even though you're setting it to another ElementRef: let item:ElementRef, item2:ElementRef; item = item2; // no can do. . Very confusing. But this is fine: let item:ElementRef, item2:ElementRef; item = item2.nativeElement because of the implementation you pointed out. – oooyaya
1 upvote
  flag
Actually your first example let item: ElementRef, item2: ElementRef; item = item2 fails because of definite assignment analysis. Your second fails for the same reasons but both succeed if item2 is initialized for the reasons discussed (or as a useful quick check for assignability we can use declare let here). Regardless, truly a shame to see any on a public API like this. – Aluan Haddad

Angular 4+: Use renderer.selectRootElement with a CSS selector to access the element.

I've got a form that initially displays an email input. After the email is entered, the form will be expanded to allow them to continue adding information relating to their project. However, if they are not an existing client, the form will include an address section above the project information section.

As of now, the data entry portion has not been broken up into components, so the sections are managed with *ngIf directives. I need to set focus on the project notes field if they are an existing client, or the first name field if they are new.

I tried the solutions with no success. However, Update 3 in this answer gave me half of the eventual solution. The other half came from MatteoNY's response in this thread. The result is this:

import { NgZone, Renderer } from '@angular/core';

constructor(private ngZone: NgZone, private renderer: Renderer) {}

setFocus(selector: string): void {
    this.ngZone.runOutsideAngular(() => {
        setTimeout(() => {
            this.renderer.selectRootElement(selector).focus();
        }, 0);
    });
}

submitEmail(email: string): void {
    // Verify existence of customer
    ...
    if (this.newCustomer) {
        this.setFocus('#firstname');
    } else {
        this.setFocus('#description');
    }
}

Since the only thing I'm doing is setting the focus on an element, I don't need to concern myself with change detection, so I can actually run the call to renderer.selectRootElement outside of Angular. Because I need to give the new sections time to render, the element section is wrapped in a timeout to allow the rendering threads time to catch up before the element selection is attempted. Once all that is setup, I can simply call the element using basic CSS selectors.

I know this example dealt primarily with the focus event, but it's hard for me that this couldn't be used in other contexts.

upvote
  flag
The class Renderer is DEPRECATED since Angular 4.3.0. angular.io/api/core/Renderer – Jamie
1 upvote
  flag
One can use Renderer2 angular.io/api/core/Renderer2 – theFreedomBanana

to get the immediate next sibling ,use this

event.source._elementRef.nativeElement.nextElementSibling

import the ViewChild decorator from @angular/core, like so:

<form #f="ngForm"> ... </form>



 import { ViewChild } from '@angular/core';

    class TemplateFormComponent {

      @ViewChild('f') myForm: any;
    .
    .
    .
    }

now you can use 'myForm' object to access any element within it in the class.

source: https://codecraft.tv/courses/angular/forms/template-driven/

upvote
  flag
But you should notice that you almost not need to access template elements in the component class, you just need to well understand the angular logic correctly. – Hany
upvote
  flag
Dont use any, the type is ElementRef – Johannes

Not the answer you're looking for? Browse other questions tagged or ask your own question.