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
On Monday, June 15, 2020 at 10:27:52 PM UTC+5:30, Divanshu Sabharwal wrote:
>
> 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
>
>
>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/a8d73408-46c0-4319-b806-b8ce1b7e53a3o%40googlegroups.com.
