Using PrimeNG Radio Button Components in Angular

Why Choose PrimeNG Radio Button Components?

PrimeNG is a popular library of UI components for Angular, offering a variety of options such as buttons, tables, charts, and more. Its radio button component stands out for several reasons:

1. Responsive Design: PrimeNG components are responsive and adaptable to various screen sizes, ensuring a smooth user experience across devices.

2. Rich Features: PrimeNG radio buttons provide advanced features such as custom icons, theme support, and styling flexibility.

3. Cross-browser Compatibility: PrimeNG components ensure consistent behavior across modern browsers.

1. Install PrimeNG and PrimeIcons

Run the following commands to add PrimeNG and its dependencies to your Angular project:

npm install primeng --save
npm install primeicons --save
npm install @angular/animations --save

2. Import Required Modules

import { RadioButtonModule } from 'primeng/radiobutton';
import { FormsModule } from '@angular/forms'; // If using template-driven forms
import { ReactiveFormsModule } from '@angular/forms'; // If using reactive forms

@NgModule({
 declarations: [AppComponent],
 imports: [
  RadioButtonModule,
  FormsModule,
  ReactiveFormsModule // Import this based on the type of forms used
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

3. Using PrimeNG Radio Buttons in Template-Driven Forms

<h3>Select Your Preferred Payment Method</h3>

<div class="field-radiobutton">
 <p-radioButton name="payment" value="Credit Card" [(ngModel)]="selectedPaymentMethod" label="Credit Card"></p-radioButton>
</div>
<div class="field-radiobutton">
 <p-radioButton name="payment" value="PayPal" [(ngModel)]="selectedPaymentMethod" label="PayPal"></p-radioButton>
</div>
<div class="field-radiobutton">
 <p-radioButton name="payment" value="Bank Transfer" [(ngModel)]="selectedPaymentMethod" label="Bank Transfer"></p-radioButton>
</div>

<p>Selected Payment Method: {{ selectedPaymentMethod }}</p>

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 selectedPaymentMethod: string;
}

4. Using PrimeNG Radio Buttons in Reactive Forms

<form [formGroup]="paymentForm">
 <h3>Select Your Preferred Payment Method</h3>
  
 <div class="field-radiobutton">
  <p-radioButton name="payment" value="Credit Card" formControlName="paymentMethod" label="Credit Card"></p-radioButton>
 </div>
 <div class="field-radiobutton">
  <p-radioButton name="payment" value="PayPal" formControlName="paymentMethod" label="PayPal"></p-radioButton>
 </div>
 <div class="field-radiobutton">
  <p-radioButton name="payment" value="Bank Transfer" formControlName="paymentMethod" label="Bank Transfer"></p-radioButton>
 </div>
  
 <p>Selected Payment Method: {{ paymentForm.get('paymentMethod').value }}</p>
</form>

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 paymentForm: FormGroup;

 constructor() {
  this.paymentForm = new FormGroup({
   paymentMethod: new FormControl('Credit Card') // Default selection
  });
 }
}

5. Adding Accessibility

PrimeNG components are built with accessibility in mind. To enhance usability, ensure that the radio buttons are properly labeled and keyboard navigable.

PrimeNG radio buttons come with built-in ARIA attributes. The label attribute already helps screen readers identify the options correctly. For further accessibility, you can ensure that radio button groups are included within appropriate semantic elements (like a fieldset and legend for a group of related options).