title: How to generate data-automation-id for each option dynamically
body: <p>I'm new to Angular. I've written some code. It contains two dropdown menus. I'm using simple <code>select</code> and <code>option</code> tag of HTML. It is working perfectly. But the QA team says they ain't able to test it. How do I add <code>data-automation-id</code> for each option separately in runtime. I'm reading options from the same array using <code>ngFor</code>. Here is my code.</p>
  
  <p><strong>mycalendar.component.html</strong></p>
  
  <pre><code>&lt;select data-automation-id="timeselection-mode-primary"&gt;
    &lt;option *ngFor="let mode of modes"&gt;
        {{ mode }}
    &lt;/option&gt;
  &lt;/select&gt;
  
  ...
  
  &lt;select data-automation-id="timeselection-mode-secondary"&gt;
    &lt;option *ngFor="let mode of modes"&gt;
        Previous {{ mode }}
    &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>There're no reactive forms involved. Plain HTML tags.</p>
  
  <p><strong>mycalendar.component.ts</strong></p>
  
  <pre><code>modes=['Year', 'Quarter', 'Sprint'];
  </code></pre>
  
  <p>Can someone please tell me how do i generate automation ids in runtime. Or am I asking a wrong question and wasting everyone's time. Please suggest an alternative in that case.</p>