Angular RadioButton is an extension to standard radio button element with theming.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
import {RadioButtonModule} from 'primeng/radiobutton';
Getting Started
Two-way value binding is defined using the standard ngModel directive.
<p-radioButton name="groupname" value="val1" [(ngModel)]="selectedValue"></p-radioButton>
<p-radioButton name="groupname" value="val2" [(ngModel)]="selectedValue"></p-radioButton>
export class ModelComponent {
selectedValue: string;
}
As model is two-way binding enabled, giving a default value to the model is enough to display a radio button as checked by default.
export class ModelComponent {
selectedValue: string = 'val1';
}
Model Driven Forms
RadioButton can be used in a model driven form as well.
<p-radioButton name="groupname" value="ps4" formControlName="console"></p-radioButton>
Label
The label attribute provides a label text for the radio button. This label is also clickable and selects value.
<p-radioButton name="groupname" value="val1" label="Option 2" [(ngModel)]="selectedValue"></p-radioButton>
Theming
RadioButton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG RadioButton showcase for demos and documentation.