What's the proper way of accessing native element in angular2 (2 diff ways) docs are scarce

Question

What's the proper way of accessing native element in angular2 (2 diff ways) so I have seen code that uses:

constructor(ele: ElementRef) {
    let myEl = ele.nativeElement;
    // do some work on myEl such as jQuery(myEl).hide()
    ...

As well as code that uses native dom via BrowserDomAdapter:

constructor(viewContainer:ViewContainerRef) {
   let dom = new BrowserDomAdapter();
   let el = viewContainer.element.nativeElement; 
   let myEle = dom.getElementsByClassName(el, element)[0];
   // or jQuery(myEle).hide()
   ...

I am wondering what's the Pro / Cons and "proper" way of doing things. Unfortunately, the docs seem scarce still.

I am assuming the latter will give you WebWorkers support through the interface, but it is just my assumption.

I think you saw it before I changed source – born2net Feb 17 '16 at 18:15 — born2net, Feb 17 '16 at 18:15

score 25 · Accepted Answer · edited May 23 '17 at 10:31

25

<div #foo>

@ViewChild() foo;
ngAfterViewInit(){
  foo.nativeElement...
}

or if transcluded

@ContentChild() foo;
ngAfterContentInit(){
  foo.nativeElement...
}

Allow to pick elements by template variable or component or directive type. (with a type you'll get the component instance instead of the element though.

or

constructor(@ViewChildren('foo') elements) {...  
constructor(@ContentChildren('foo') elements) {...

@ViewChild provides a live view to matching elements with changes subscription.

See also

edited May 23 '17 at 10:31

Community

1
1

answered Feb 17 '16 at 17:48

Günter Zöchbauer

623,577
216
2,003
1,567

1

Would you please update your answer with pros/cons of using two ways.Seems interesting question. – micronyks Feb 17 '16 at 17:55
1

Not sure about pros/cons. `DomAdapter` should be avoided AFAIK. Modifying native elements directly should be avoided as well. I think the `Renderer` provides an API to use nativeElement the Angular way. – Günter Zöchbauer Feb 17 '16 at 18:03
1

as of now hard for me to understand them fully without examples and different `use cases` but thanks for the sharing knowledge. – micronyks Feb 17 '16 at 18:13
What I am trying to do is get a QueryList of LI items that are part of my loop as in:

born2net

Feb 17 '16 at 18:40

I guess I have another question if you don't mind... once I for loop over a QueryList, I get an ElementRef, and so in my

list each LI has an ID='' and so I am wondering what is the proper way of accessing that ID without resorting to looking into the object with jQuery... tx – born2net Feb 17 '16 at 19:10

basically I can do this.simpleItems.map(i=>{ console.log(i._appElement.nativeElement); }) but it seem odd for me to this to access the id of each LI that way... I would imagine queryList should have some sort of getter for ElementRef but I didn't see any in the docs – born2net Feb 17 '16 at 19:12

`this.simpleItems.map(i=>{ console.log(i._appElement.nativeElement.id); })` should work. Is that what you are looking for? – Günter Zöchbauer Feb 17 '16 at 19:15

1

yes that's what I am doing... its just seems the "not so angular way"... I mean, do you think it's acceptable to store id of each LI item and access it like that...? :/ tx! – born2net Feb 17 '16 at 19:18

Depends on why you doing it. What do you do with the id? – Günter Zöchbauer Feb 17 '16 at 19:21

I have a multi selection LI list,,, so when a user does a Cont-A I select the entire list... here is the code: https://github.com/born2net/studioDashboard/blob/master/src/comps/simplelist/Simplelist.ts and https://github.com/born2net/studioDashboard/blob/master/src/comps/simplelist/Simplelist.html so I keep a list of selected indexes – born2net Feb 17 '16 at 19:33

I think it would be better to maintain selection state in an array and bind each element to the array item. – Günter Zöchbauer Feb 17 '16 at 19:34

so I ended up using your advice, keeping state and staying away from the dom ;) here is final version, let me know your thoughts and tx https://github.com/born2net/studioDashboard/blob/master/src/comps/simplelist/Simplelist.ts as well as https://github.com/born2net/studioDashboard/blob/master/src/comps/simplelist/Simplelist.html – born2net Feb 17 '16 at 23:41

peterh · Answer 2 · 2017-03-20T12:09:43.033

There is a (probably intentionally) undocumented feature for that. You don't have to deal with views and with injected inputelements.

Furthermore, simply giving a

constructor(private e: ElementRef)

also won't work, it will be compilable by the typescript, but it will give you a parameter error in the runtime initializaton.

Finally I could find a solution in only 3 hours of digging:

import { Component, Directive, ElementRef, Inject } from "@angular/core";

@Component({
    selector: "my-selector",
    template: "my-template"
})
export class MyComponent {
    private domNode: HTMLElement = null;
    constructor( @Inject(ElementRef) elementRef: ElementRef) {
        this.domNode = elementRef.nativeElement;
    }
}

As you can see, the constructor will get the ElementRef if and only if you have injected the parameter with an @Inject(ElementRef) keyword. Both Inject and ElementRef should be imported from the angular core.

ElementRef.nativeElement is the HTML DOM node what you are looking for. You have the chance to catch it only in the constructor, so don't miss the opportunity.

In the Angular documentation, they try to convince you that you don't need it, in their dialect it means that they admit that you need it, but they don't want you to use it.

In earlier angular versions it worked even without the @Inject thing, but fortunately the Angular development always Provides us newer and newer secrets in their otherways "stable" product.

Extension:

There was a comment (currently moved into a chatroom), it said that the @Inject annotation is not needed if you have emitDecoratorMetadata: true in your tsconfig.json. My experiences contradict this, furthermore it breaks the wall between the js and ts, but it is also a possible solution. It is possible, that the experiences of the commenter are from a previous week.

Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackoverflow.com/rooms/137212/discussion-on-answer-by-peterh-whats-the-proper-way-of-accessing-native-element). — Bhargav Rao, Mar 04 '17 at 11:15

What's the proper way of accessing native element in angular2 (2 diff ways) docs are scarce

2 Answers2

Linked