How can I retrieve the value of the radio button that is clicked in app.component.html from within app.component.ts?
app.component.html
<div class="container">
<div class="row">
<div class="col-sm-3 well" style="width: 20%">
<h4>Narrow Your Results</h4>
<div class="well">
<h5>Rating</h5>
<form [formGroup]="ratingForm">
<input type="radio" formControlName="rating" value=100
(click)="filterByRating(ratingForm.value)"> All Grills
</form>
</div>
</div>
</div>
app.component.ts
@Component({
selector: 'app-rootl',
moduleId: module.id,
templateUrl: app.component.html'
})
export class AppComponent implements OnInit {
ratingForm = new FormGroup({
rating: new FormControl(),
});
filterByRating(rating: number) {
console.log("rating = " + rating.valueOf());
}
}
When calling filterByRating(), instead of getting "rating=100" printed out, I see "rating = [object Object]". How can I access the actual value of the object?