title: Angular 2 Material: can't bind to 'value' since it isn't a known property of 'md-radio-button'
body: <p>I am running an example of radio buttons from <a href="https://material.angular.io/components/component/radio" rel="noreferrer">here</a>, I have made sure to follow all the <a href="https://material.angular.io/guide/getting-started" rel="noreferrer">instruction</a>, except for the appendix, since I have no 
  such file (my app was created cli).</p>
  
  <p>After including the html template my app won't render and in the console I have an error:</p>
  
  <blockquote>
    <p>can't bind to 'value' since it isn't a known property of
    'md-radio-button</p>
  </blockquote>
  
  <p>My ts file:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { SlidesService } from 'app/slides/slides.service';
  import { Slide } from 'app/slides/slide';
  import { Observable } from 'rxjs/Rx';
  import { Subscription } from 'rxjs/Subscription';
  import { MdButtonModule, MdCheckboxModule } from '@angular/material';
  
  @Component({
    selector: 'app-question',
    templateUrl: './question.component.html',
    styleUrls: ['./question.component.css']
  })
  export class QuestionComponent implements OnInit {
  
    constructor(private _slidesService: SlidesService) { }
    slides: Slide[];
    currSlide: Slide;
    favoriteSeason: string;
  
    seasons = [
      'Winter',
      'Spring',
      'Summer',
      'Autumn',
    ];
    ngOnInit() {
      this._slidesService.getSlides()
        .subscribe(slides =&gt; {
          this.slides = slides
          this.currSlide = slides[0];
  
        },
        error =&gt; console.log(&lt;any&gt;error));
    }
  
  }
  </code></pre>
  
  <p>my html file:</p>
  
  <pre><code>&lt;div class="well well-lg" *ngIf='slides &amp;&amp; slides.length'&gt;
    &lt;img [src]='slides[0].imageUrl'&gt;
    &lt;h1&gt;{{currSlide.SongTitle}}&lt;/h1&gt;
    &lt;md-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason"&gt;
      &lt;md-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season"&gt;
        {{season}}
      &lt;/md-radio-button&gt;
    &lt;/md-radio-group&gt;
    &lt;div class="example-selected-value"&gt;Your favorite season is: {{favoriteSeason}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>AppModule:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { AlertModule } from 'ngx-bootstrap';
  import { CarouselModule } from 'ngx-bootstrap/carousel';
  import { AppComponent } from './app.component';
  import { SlidesComponent } from './slides/slides.component';
  import { SlidesService } from './slides/slides.service';
  import { QuestionComponent } from './question/question.component';
  import { MdButtonModule, MdCheckboxModule } from '@angular/material';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { FormControl, FormGroup } from '@angular/forms';
  import { MaterialModule } from '@angular/material';
  import { ReactiveFormsModule } from '@angular/forms';
  @NgModule({
    declarations: [
      AppComponent,
      SlidesComponent,
      QuestionComponent
    ],
    imports: [ReactiveFormsModule, MaterialModule,
      BrowserAnimationsModule,
      MdButtonModule,
      MdCheckboxModule,
      BrowserModule,
      FormsModule,
      HttpModule,
      AlertModule.forRoot(),
      CarouselModule.forRoot()
    ],
    providers: [SlidesService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>I'd appreciate suggestions to resolve this issues.</p>