Angular 2 Material: can't bind to 'value' since it isn't a known property of 'md-radio-button'

Question

I am running an example of radio buttons from here, I have made sure to follow all the instruction, except for the appendix, since I have no such file (my app was created cli).

After including the html template my app won't render and in the console I have an error:

can't bind to 'value' since it isn't a known property of 'md-radio-button

My ts file:

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 => {
        this.slides = slides
        this.currSlide = slides[0];

      },
      error => console.log(<any>error));
  }

}

my html file:

<div class="well well-lg" *ngIf='slides && slides.length'>
  <img [src]='slides[0].imageUrl'>
  <h1>{{currSlide.SongTitle}}</h1>
  <md-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
    <md-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
      {{season}}
    </md-radio-button>
  </md-radio-group>
  <div class="example-selected-value">Your favorite season is: {{favoriteSeason}}</div>
</div>

AppModule:

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 { }

I'd appreciate suggestions to resolve this issues.

Leland

MdButtonModule (actually all of your material modules) should be imported in either AppModule, or whatever containing module this component lives in In that modules imports array. NOT In the component. All the import statement here does is imports the "sybmol". You are not actually consuming it anywhere, nor is it possible to do so in a component. – Pinworm

@NeilLunn - I was not sure about that, so I actually imported the symbols both in that component ts file and both in the AppModule (and the imports array). After your comment I tried removing the imports from the component and left it only in the AppModule - but I get the same error – Leland

@belgi is it possible for you to add your appModule definition? Looks like you are missing to add some declaration out there like CommonModule or FormModule – Elise

Yeah. Missing MdRadioModule as mentioned. – Pinworm

Answer 1

Since this seems not to have come to a conclusion, I thought I'd provide answer, from which ALL the credit goes to Neil Lunn!

As Sajeetharan's answer works with MaterialModule imported, but as Neil Lunn stated:

You should only import the "required" modules

since otherwise

this will result in a larger bundle for builds.

So this is simply solved by importing MdRadioModule to your app module and adding it to the imports array:

import { MdRadioModule } from '@angular/material';

imports: [
  ....
  MdRadioModule, 
  ....
],

Minorite

Answer 2

You have to import the MdRadioModule in appModule, and also paste it under imports.

Gadroon