I want to bind radio buttons with objects instead of strings. For that I tried a similar code to the following:
<div *ngFor="let object of objects">
<input type="radio" id="category" [(ngValue)]="object">
</div>
Is there a way in Angular to bind objects with the values of radio buttons ?
ngValue won't be available for radio buttons. It's only available with select lists.
You can use the [value] attribute binding syntax to assign an object as the value of the selected radio button.
Use this for your template:
<div *ngFor="let object of objects">
<input
(change)="onCheck()"
[(ngModel)]="selectedCategory"
type="radio"
id="category"
[value]="object">
{{ object.categoryValue }}
</div>
And in your Class:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
selectedCategory;
objects = [
{categoryName: 'Category1', categoryValue: 'Category1'},
{categoryName: 'Category2', categoryValue: 'Category2'},
{categoryName: 'Category3', categoryValue: 'Category3'},
];
onCheck() {
console.log(this.selectedCategory);
}
}
Here's a Sample StackBlitz for your ref.
