Using *ngFor for create a series of radio buttons for angular2 using materialize-css framework
<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>