title: Angular - Multiple Radio buttons in reactive forms
body: <p>We have list like below ( in original implementation productList will come from API )</p>
  
  <pre><code>productList = [{
      productId: "104",
      productName: "computer"
    },
    {
      productId: "105",
      productName: "Sprots"
    },
    {
      productId: "106",
      productName: "TV"
    }];
  </code></pre>
  
  <p>we need to display product name as <strong>radio buttons in html</strong>, something like this.</p>
  
  <pre><code>[] Computer
  [] Sports
  [] TV
  </code></pre>
  
  <p>and when we select one radio button it should give selected item in component ( for example if we select TV radio button then, may be something like this ?</p>
  
  <pre><code>this.myForm.controls['productMethods'].valueChanges.subscribe(value =&gt; {
        var a  = value 
        // how can i get a = { productId: "106",productName: "TV"} **?**
      }
  </code></pre>
  
  <p>for pre selected :-</p>
  
  <pre><code>[] Computer
  [x] Sports &lt;== how to make sports as pre-selected on page load also **?**
  [] TV
  </code></pre>
  
  <p>what i have tried is <a href="https://stackblitz.com/edit/angular-formarray-example-2-3xq45k" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-formarray-example-2-3xq45k</a> but failed to display radio buttons.</p>
  
  <p>Thanks,</p>