Angular2 How to get reference of HTML elements generated dynamically

Question

I have this inputs generated dynamically:

  <div *ngFor="let cell of column; let i = index;">
          <!-- Material design input-->
          <md-input id="my-input-{{i}}">
          </md-input>
  </div>

Please notice id=my-input-{{i}} I would like to get a reference to the DOM element based on this dynamic id. This input can be 3, 6 or more inputs so I need to access the id dynamically and get a hold to it.

@yurzui I Need to get values of all inputs on press of a button, the problem is that they can vary in amount and their content, for example they can be 3 inputs or 6 inputs or 4 or 5... so I need some way to generate dynamic id and get their contents dynamically — CommonSenseCode, Nov 10 '16 at 19:23
@quindimildev if I can acces their value and know their id it would be useful — CommonSenseCode, Nov 10 '16 at 19:34
you could access to the dom with the ElementRef.naviteElement. Check this http://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template — quindimildev, Nov 10 '16 at 19:38
@quindimildev and once I get the DOM how to access element by id="blabla" — CommonSenseCode, Nov 10 '16 at 19:39
with a selector 'elementRef.nativeElement.select("#blabla")'. maybe it is not the best solution, but i think could solve it — quindimildev, Nov 10 '16 at 19:44
@yurzui if you want to include answer Ill upvote and select your answer tjanks — CommonSenseCode, Nov 10 '16 at 19:48
@quindimildev your answers helps if you want to include ill upvote thanks — CommonSenseCode, Nov 10 '16 at 19:49

David Faure · Accepted Answer · 2017-10-02T13:07:40.007

48

The only response is

let elem:Element = document.getElementById("myProgrammaticallyChosenIndex")

No other angular weird ceremony needed

Tested on angular 4+

edited Oct 02 '17 at 13:07

answered Oct 01 '17 at 20:00

David Faure

1,336
14
25

22

No sure why that ceremony comment made me laugh – Rodrigo Mar 14 '18 at 12:34
5

just going to comment on this that angular has the weird ceremony for a reason. It doesn't apply to all developers who are only ever going to be publishing to web but angular's long term purpose is to make a unified app development platform that can be used across devices. Using document functions like this makes that not possible since other platforms / targets might not implement document the same way. – bryan60 Sep 17 '18 at 13:38
2

Interesting, but we are so far away of a cross platform product... And flutter coming from Google seems to be their next very big cross thing. I suppose we will never get any angular cross platform. – David Faure Sep 20 '18 at 12:44
@DavidF., what about Ionic and NativeScript? Both tools allow us to build hybrid app that is based on Angular – E. Evsevleev Mar 22 '19 at 10:18
Ionic is fine, I use it daily. Plus with the new Ionic 4 you use regular angular cli, Ionic 4 and Angular 7 are exactly the same. Native script I presume would not work. – David Faure Mar 24 '19 at 10:45
But how can we do it using the angular lifecycle hooks ? – Shiv Jun 24 '20 at 08:50
indeed it's better to use after `ngAfterviewInit` – David Faure Jul 01 '20 at 16:30

score 12 · Answer 2 · edited Dec 23 '16 at 18:47

12

Use ElementRef class from @angular/core to get the parent element and then create an HTMLElement to get its dynamic elements by class name.

Component:

declare var $: any; //intentional use of jQuery-not recommended though

@Component({
  selector: 'my-app',
  template: `
    <input type='button' (click)='addDiv()' value='Add New Div' />

    <input type='button' (click)='selectDiv()' value='Select' />
  `
})
export class App {
  constructor(private elRef: ElementRef) {
  }

  addDiv() {
    /*intentional use of jQuery for appending new div
     give a class to your dynamic elements*/

    $('my-app').append("<div class='foo'>Hello I'm Dynamic!</div>");
  }

  selectDiv() {
    //create a new HTMLElement from nativeElement
    var hElement: HTMLElement = this.elRef.nativeElement;

    //now you can simply get your elements with their class name
    var allDivs = hElement.getElementsByClassName('foo');

    //do something with selected elements
    console.log(allDivs);
  }
}

Working Plunker

Edit: I used jQuery only for quick demo purpose here. Otherwise, you should not use jQuery with Angular.

edited Dec 23 '16 at 18:47

Günter Zöchbauer

623,577
216
2,003
1,567

answered Dec 23 '16 at 18:32

Syed Ali Taqi

4,898
3
34
44

9

You should not include a code demo for something that you do not recommend doing, beside the fact that the question never mentioned using jQuery. – wrldbt Nov 21 '17 at 18:28
1

@wrldbt: "*`quick demo`*" – Syed Ali Taqi Nov 21 '17 at 18:59
Using jQuery in a code sample for an entirely different framework is distracting and not ideal. One strong case for Angular is that it doesn't have to be tied directly into the web interface. Learning how to use the abstraction layers Angular has put in place to allow you to serve multiple different mediums is something we as developers should strive to teach others about. – jetset Sep 12 '18 at 20:03
I have to agree with the downvoters. An answer including jQuery in an Angular app is not only counter-intuitive, it assumes familiarity with jQuery and also is a literal anti-pattern. The downvote is a technicality, but the technicalities are what keep stack overflow awesome. – dudewad Dec 13 '18 at 21:08

score 0 · Answer 3 · answered Apr 09 '21 at 17:44

If you have mulitple selectors you can use @ViewChildren. // Html

<div *ngFor="let cell of column; let i = index;">
          <!-- Material design input-->
          <md-input id="my-input-{{i}}" #inputBinding>
          </md-input>
  </div>

// TS File

@ViewChildren('inputBinding') inputBinding: QueryList<ComponentName>;

ngAfterViewInit(){
 console.log(this.inputBinding.toArray());
}

score -1 · Answer 4 · edited Mar 20 '19 at 14:16

-1

You can access the DOM by the elementRef.

Inject it through your constructor by

constructor(myElement: ElementRef) { ... }

And access the DOM element by the nativeElement property

myElement.nativeElement.select("#blabla")

edited Mar 20 '19 at 14:16

Harry

181
5
13

answered Nov 10 '16 at 19:51

quindimildev

1,280
8
21

4

`elementRef.nativeElement` does not have a `select` method. – Pete Gardner Jun 16 '17 at 14:19
should be `myElement.nativeElement.select('#blabla')` – ya_dimon Sep 28 '18 at 15:26

score -1 · Answer 5 · answered Nov 10 '16 at 21:36

There is a class called ElementRef class

It gives your permit direct access to the current component or directive hosting DOM.

You can use ElementRef.nativeElement to get a HTML element, then you can access to html element properties to make your modification by using jQuery or Renderer class provided by Angular 2.

Example with ElementRef and Renderer:

import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef, renderer: Renderer) {
       renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
    }
}

Angular2 How to get reference of HTML elements generated dynamically

5 Answers5

Linked