<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ x ] bug report =&gt; search github for a similar issue or PR before submitting
[ x ] feature request
"><pre class="notranslate"><code class="notranslate">[ x ] bug report =&gt; search github for a similar issue or PR before submitting
[ x ] feature request

</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
I have a component that may create inside it several other components that may have Radio Button Groups inside them. I want the nested components to not have to receive any reference of their index in the array since they may be used in other situations. The problem is that each group seems to need an unique 'name'. By having several groups generated with the same name, the view only shows the selected circles for one (although the value bindings work well)</p>
<p dir="auto"><strong>Expected behavior</strong><br>
I would like to be able to generate a unique random name for each radio button group inputs or some other thing that would allow each button group to be isolated from the other</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
Here's a plunker in which it doesn't seem possible to have unique names for each groups (without sending inside the reference of the array index which I wanted to avoid, since the radioButton component is used in another part of the app that doesn't really need any index. Apart from that reason I wanted to pass in only the relevant data to that component. The real case is a little bit more complex.</p>
<p dir="auto"><a href="https://plnkr.co/edit/3gNOgRT9TYwJmwuebJGB?p=preview" rel="nofollow">https://plnkr.co/edit/3gNOgRT9TYwJmwuebJGB?p=preview</a></p>
<p dir="auto">Thanks</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.0 final</p>

</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript 2 beta ]</p>
</li>
</ul>
<p dir="auto">See <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="116989595" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/5294" data-hovercard-type="pull_request" data-hovercard-url="/angular/angular/pull/5294/hovercard" href="https://github.com/angular/angular/pull/5294">#5294</a> for pointers</p>