DEV Community

loading...
Cover image for Angular RadioButton

Angular RadioButton

primetek profile image PrimeTek ・1 min read

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
export class ModelComponent {

    selectedValue: string;

}
Enter fullscreen mode Exit fullscreen mode

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';

}
Enter fullscreen mode Exit fullscreen mode

Model Driven Forms

RadioButton can be used in a model driven form as well.

<p-radioButton name="groupname" value="ps4" formControlName="console"></p-radioButton>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (1)

pic
Editor guide
Collapse
zacharythomasstone profile image
Zachary Stone

Awesome! I will keep this in mind as a good tool for my next Angular Project.