Primeng radio button default selected

PrimeNG Radio Button – Default selected

To have a default selected value for a PrimeNG Radio Button component, you can use the [(ngModel)] directive or the [ngModel] attribute along with the [checked] attribute.

Using [(ngModel)] directive

You can bind the selected value to a variable using the [(ngModel)] directive. This variable will hold the default selected value and will be updated based on user selection.

Here’s an example:

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

@Component({
  selector: 'app-radio-buttons',
  template: `
    
       Red
    
    
       Blue
    
    
       Green
    
    
Selected Color: {{ selectedColor }}
  `
})
export class RadioButtonsComponent {
  selectedColor: string = "blue";
}
    
  

In the above example, the variable selectedColor is bound to the radio buttons using the [(ngModel)] directive. The initial value of selectedColor is set to “blue” which will be the default selected value.

Using [ngModel] and [checked] attributes

You can also set the default selected value using the [ngModel] and [checked] attributes.

Here’s an example:

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

@Component({
  selector: 'app-radio-buttons',
  template: `
    
       Red
    
    
       Blue
    
    
       Green
    
    
Selected Color: {{ selectedColor }}
  `
})
export class RadioButtonsComponent {
  selectedColor: string = "blue";
}
    
  

In this example, the [ngModel] attribute is used to bind the selectedColor variable to the radio buttons. The [checked] attribute is used to determine whether a particular radio button should be selected or not based on the value of selectedColor.