angularangular2-templateangular2-directives

Angular2 How to get reference of HTML elements generated dynamically

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.

Solution

  • The simplest answer is to rely on vanilla javascript

    const el:Element = document.getElementById("myProgrammaticallyChosenIndex")

    No other angular weird ceremony needed

    Tested on angular 4+