Reputation: 15082
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.
Upvotes: 7
Views: 37213
Reputation: 740
You have to import the MdRadioModule
in appModule, and also paste it under imports
.
Upvotes: 3
Reputation: 73387
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,
....
],
Upvotes: 9