title: reusing angular component that contain radio button group
body: <p>I have two component in my app </p>
  
  <p>app-sample-container
   and 
  app-radiobutton-form</p>
  
  <p>I want to reuse app-radiobutton-form twice or more in app-sample-container, 
  everything is ok except for radio buttons</p>
  
  <p>radio button state is shared among all app-radiobutton-form instance on app-sample-container</p>
  
  <p>here is app-radiobutton-form  HTML </p>
  
  <pre><code>&lt;div class="form-inline"&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;all items are approved&lt;/label&gt;
        &lt;input  [value]="true" type="radio" [ngModel]="isApproved"&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label&gt;none of items are approved&lt;/label&gt;
          &lt;input  [value]="false" type="radio"  [ngModel]="isApproved"&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>and here is ts file </p>
  
  <pre><code>import { Component, OnInit, EventEmitter, Output } from '@angular/core';
  
  @Component({
    selector: 'app-radiobutton-form',
    templateUrl: './app-radiobutton-form.html',
    styleUrls: ['./app-radiobutton-form.component.scss']
  })
  export class RadioButtonFormComponent implements OnInit {
    isApproved: Boolean = null;
    constructor() { }
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p>and below is app-sample-container HTML </p>
  
  <pre><code>&lt;app-radiobutton-form #form1&gt;&lt;/app-radiobutton-form&gt;
  &lt;app-radiobutton-form #form2&gt;&lt;/app-radiobutton-form&gt;
  </code></pre>
  
  <p>when I click radio button on form1 , radio button on form2 also change .</p>
  
  <p>i cant find a simple way to unique radio group button base on an instance of 
  app-radiobutton-form.</p>
  
  <p>any solution?</p>
  
  <p>note: the question is simplified.</p>