how to use aria-labelledby for *ngFor accessiblity in Angular2 for screen reader announcement

Question

Angular2 accessibility Issue: screen reader Nvda tool announcements are as below. Employee Name Peter request check box not checked Employee Name Peter request check box not checked

it should announce Tom for second value, Expected Result: Employee Name Tom request check box not checked. How to fix this ?

employees array in component.ts file as below.
employees= [
    { "id":1, "name": "Peter", "age":32},
    { "id":2, "name": "Tom", "age":28}
  ];

component.html file as below:
<div class="row">
        <div class="col-md-6">
            <label id="empName">Employee Name</label>
        </div>
        <div class="col-md-6">
            <label id="request">request</label>
        </div>
    </div>

    <div *ngFor="let emp of employees; let i = index;" class="row">
        <div class="col-md-6">
            <span id="name">{{emp.name}}</span>
        </div>
         <div class="col-md-6">
            <input type="checkbox" aria-labelledby="empName name request" />
        </div> 
    </div>

Answer 1

I figured out the solution on my own. By using index, generating unique id's and then passing that id in aria-labelledby. something like this.

{{emp.name}} [attr.aria-labelledby]="'name-' + i"

Thanks