title: Shared RadioButton Component in Angular2
body: <p>I want to reuse my component at the same page, but I have the problem to define the value of my Radio Buttons depending the one I am working on. </p>
  
  <p>I have three shared-components and I don't know how to do it to difference them. I mean, if I work on the first, I don't want the other 2 components get modified. 
  I solved using a "drastic" mode, and I would like to do it better. Any Suggestion would be appreciated. </p>
  
  <p>Here is my html code: </p>
  
  <pre><code>&lt;div class="ui form"&gt;
    &lt;div class="inline fields"&gt;
      &lt;label for="fruit"&gt;Send to:&lt;/label&gt;
      &lt;div class="field"&gt;
        &lt;div class="ui radio checkbox"&gt;
          &lt;input type="radio" name="radio{{A}}{{B}}" value="selected" [(ngModel)]="option"&gt;
          &lt;label&gt;Send Selected&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="field"&gt;
        &lt;div class="ui radio checkbox"&gt;
          &lt;input type="radio" name="radio{{A}}{{B}}" value="all" [(ngModel)]="option"&gt;
          &lt;label&gt;Send All&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The way I'm doing is to declare the value A and B, which are booleans, but I think is a bad way to resolve it. </p>
  
  <p>The variables from his components are: </p>
  
  <pre><code>@Input() A: boolean;
  @Input() B: boolean;
  @Input() C: boolean;
  private option: string = 'selected';
  </code></pre>
  
  <p>Is there any method to improve this solution? : </p>
  
  <pre><code>name="radio{{A}}{{B}}"
  </code></pre>