I'm new to Angular. I've written some code. It contains two dropdown menus. I'm using simple select and option tag of HTML. It is working perfectly. But the QA team says they ain't able to test it. How do I add data-automation-id for each option separately in runtime. I'm reading options from the same array using ngFor. Here is my code.
mycalendar.component.html
<select data-automation-id="timeselection-mode-primary">
<option *ngFor="let mode of modes">
{{ mode }}
</option>
</select>
...
<select data-automation-id="timeselection-mode-secondary">
<option *ngFor="let mode of modes">
Previous {{ mode }}
</option>
</select>
There're no reactive forms involved. Plain HTML tags.
mycalendar.component.ts
modes=['Year', 'Quarter', 'Sprint'];
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.
To make data attributes to options dynamically, try adding attributes to the options with [attr.data-*].. In your case like below.
<option *ngFor="let mode of modes; let i = index;" [attr.data-automation-id]='i'>
{{ mode }}
</option>