How to properly set IDs on Angular components' input elements?

Issue

I'm trying to think of the best way to address this situation. I have an angular component that builds a card with information on a employee which you can edit, I have checkboxes, text fields, etc.

This component is built multiple times on a single page, one instance of the component for each employee registered. I'm having conflicts with the id attribute of the checkbox inputs; since the component is built multiple times, when I click on the checkbox on the second card, the box that is checked is actually the one on the first card.

This is the structure that I have on the component template.

<input type="checkbox" [attr.readonly]="editAgentState ? null : 'readonly'" checked id="card-weekday-mon" class="weekday"
                />
                <label for="card-weekday-mon">Mo</label>
                <input type="checkbox" checked id="card-weekday-tue" class="weekday" />
                <label for="card-weekday-tue">Th</label>
                <input type="checkbox" checked id="card-weekday-wed" class="weekday" />
                <label for="card-weekday-wed">We</label>
                <input type="checkbox" checked id="card-weekday-thu" class="weekday" />
                <label for="card-weekday-thu">Tu</label>
                <input type="checkbox" checked id="card-weekday-fri" class="weekday" />
                <label for="card-weekday-fri">Fr</label>
                <input type="checkbox" id="card-weekday-sat" class="weekday" />
                <label for="card-weekday-sat">Sa</label>
                <input type="checkbox" id="card-weekday-sun" class="weekday" />
                <label for="card-weekday-sun">Su</label>
              </div>

So I'm trying to find what would be the best way to kinda set a dynamic Id for each checkbox, so that the click affects the exact checkbox that was clicked.

Solution

You could use a variable from your ts file as your id for the div like

<input type="checkbox" [attr.readonly]="editAgentState ? null : 'readonly'" checked id={{employee.name}} class="weekday"/>

And you could populate employee name from your ts file. This way every instance of your component will have separate ids.

Answered By - Roopesh Kumar Ramesh