Angular2 How to get reference of HTML elements generated dynamically

angular angular2-template angular2-directives
CommonSenseCode picture CommonSenseCode · Nov 10, 2016 · Viewed 73.6k times · Source

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.

Answer

David F. picture David F. · Oct 1, 2017

The only response is

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

No other angular weird ceremony needed

Tested on angular 4+

Related questions

Angular 2 Scroll to top on Route Change

In my Angular 2 app when I scroll down a page and click the link at the bottom of the page, it does change the route and takes me the next page but it doesn't scroll to the top of the …

Read More
Implementing autocomplete

I am having trouble finding a good autocomplete component for Angular2. Just anything that I can pass a list of key-label objects to and have a nice autocomplete on an input field. Kendo does not support Angular 2 yet and that …

Read More
How to implement ngModel on custom elements?

Given a simple input element I can do this: <input [(ngModel)]="name" /> {{ name }} This doesn't work for my custom elements: <my-selfmade-combobox [(ngModel)]="name" values="getValues()" required></my-selfmade-combobox> How can I implement it?

Read More