Why it's not working
The status variable in your *ngFor loop is not being used in the for attribute of your label or the id attribute of your input.
There are two options to fix this:
You can use a template expression by putting the attributes in square brackets like this:
<input [id]="status">
which is what you did (correctly) with the value attribute.
A template expression produces a value. Angular executes the expression and assigns it to a property of a binding target; the target might be an HTML element, a component, or a directive.
You can use interpolation by using double-curly braces like this:
<input id="{{status}}">
More generally, the material between the braces is a template expression that Angular first evaluates and then converts to a string.
What's the difference?
Checkout this answer for an explanation on the differences between these methods.
Full Template Html
<h2>Current Status</h2> <p>{{maritalStatus?.status}}</p> <h2>Options</h2> <div *ngFor="let status of statuses; let indx = index"> <input #widget class='with-gap' name='statusGroup' type='radio' [id]='status' [value]='status' [(ngModel)]='maritalStatus.status' /> <label [for]='status'>{{status}}</label> </div>
Full Component
import {Component} from '@angular/core'; import {Http} from '@angular/http' import {bootstrap} from '@angular/platform-browser-dynamic'; @Component({ selector: 'material-app', templateUrl: 'app.component.html' }) export class AppComponent { maritalStatus = { status: 'Nothing selected' }; statuses: string[] = [ 'Single', 'Married', 'Divorced', 'Common-law', 'Visiting' ]; constructor() { } }
Update - Angular 2 versions < 2.2.0
If you're using an Angular 2 version that is less than 2.2.0 you need to explicitly set the label's for attribute like this:
<label [attr.for]='status'>{{status}}</label>
because for is not a property of label elements.
Why?
Since Angular 2.2.0 (634b3bb), Angular maps the for attribute to the related htmlFor property.
It sounds like a lot of developers intuitively expected this, so they added it.
This was all pretty confusing for me at first, and this article by Pascal Precht really cleared up a lot of questions.
