Angular 8 event binding (with multiple instances component) works for only first component..

[Divanshu Sabharwal]

I created a component and loaded it multiple times on the same page. 

All other data bindings work fine, the only problem arrived when I started using a dynamic radiobutton list with (click) event in the same component. Click event hits but this always targets the first instance of the component, no matter which instance i click.

Below is the code snippet:

my component html file:

<div>

<ul>

        <li *ngFor="let option of options">

           <input type="radio" (click)="getValue(option)">{{option}}

        </li>

      </ul>

</div>

<div id="divyesno" hidden="true">

    ........

</div>

my component ts file:

getValue(selected:string){

        var divyesno = document.getElementById("divyesno");

        var divyesnoparent = divyesno.parentElement.innerHTML;

....

}

app.component.html (which calls my above component multiple times)

<div *ngFor="let item of items">

    <app-component ......>

    </app-component >

  </div>

Now i have checked the parent element in the my component ts file, it always refer to the first component on the main app page.

Please help..!!

Thanks

[Divanshu Sabharwal]

I figured out the solution. It turns out to be the ids were the problems given to the div below.

When i removed the id, it worked just fine.

Thanks