title: Using *ngFor for create a series of radio buttons for angular2 using materialize-css framework
body: <p>Seasons greetings everyone!</p>
  
  <p>I have the following code that constructs a single radio-button based on the materialize-css framework <a href="http://materializecss.com/forms.html#radio" rel="noreferrer">http://materializecss.com/forms.html#radio</a></p>
  
  <pre><code>&lt;input name = 'group1'
         type = 'radio'
         id = 'test2'/&gt;
  &lt;label for = 'test2'&gt;Yellow&lt;/label&gt;
  </code></pre>
  
  <p>My attempt at using *ngFor is shown below:</p>
  
  <pre><code>  statuses: string[] = [
      'Single',
      'Married',
      'Divorced',
      'Common-law',
      'Visiting'
    ];
  
    &lt;p&gt;{{maritalStatus?.status}}&lt;/p&gt;
    &lt;div *ngFor = 'let status of statuses;  let indx = index'&gt;
      &lt;input #widget
             class = 'with-gap'
             name = 'statusGroup'
             type = 'radio'
             id = 'status'
             [value] = 'status'
             [(ngModel)] = 'maritalStatus.status'
             (change) = 'radioBtnChange$.next(status)'
      /&gt;
      &lt;label for = 'status'&gt;{{status}}&lt;/label&gt;
      &lt;p&gt;{{status}}{{ indx}}&lt;/p&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>All buttons are created but only the first button (Single) can be selected.</p>
  
  <p>How can I get the series of button to function as radio-buttons are expected to do?</p>
  
  <p>Thanks</p>