Componente de botón de radio angular PrimeNG

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente RadioButton en Angular PrimeNG.

Componente RadioButton: permite al usuario seleccionar una opción a la vez de un conjunto.

Propiedades:

• nombre:  Se utiliza para establecer el nombre del grupo de radiobutton. Es de tipo de datos de string, el valor predeterminado es nulo.
• valor: Se utiliza para establecer el valor del radiobutton. Es de tipo de datos de string, el valor predeterminado es nulo.
• etiqueta: Se utiliza para establecer la etiqueta del radiobutton. Es de tipo de datos de string, el valor predeterminado es nulo.
• disabled: Especifica que el elemento debe estar deshabilitado, es del tipo de dato booleano, el valor por defecto es false.
• tabindex: se utiliza para establecer el índice del elemento en orden de tabulación. Es de tipo de datos numérico, el valor predeterminado es nulo.
• inputId:  es un identificador de ID del elemento de entrada subyacente. Es de tipo de datos de string, el valor predeterminado es nulo.
• ariaLabelledBy: Es la propiedad ariaLabelledBy que establece relaciones entre el componente y la(s) etiqueta(s) donde su valor debe ser uno o más ID de elementos. Es de tipo de datos de string, el valor predeterminado es nulo.
• estilo: se utiliza para establecer el estilo en línea del elemento. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• styleClass: Se utiliza para establecer la clase de estilo del elemento. Es de tipo de datos de string, el valor predeterminado es nulo.
• ariaLabel: Se utiliza para definir una string que etiqueta el elemento de entrada . Es de tipo de datos de string, el valor predeterminado es nulo.
• labelStyleClass: Se utiliza para establecer la clase de estilo de la etiqueta. Es de tipo de datos de string, el valor predeterminado es nulo.

Eventos:

• onClick: es una devolución de llamada que se dispara al hacer clic en el botón de opción.
• onFocus: es una devolución de llamada que se activa cuando el botón de radio recibe el foco.
• onBlur: es una devolución de llamada que se activa cuando el botón de opción pierde el foco.

Métodos:

• foco: Este método se utiliza para aplicar foco en el elemento.

Estilo: 

• p-radiobutton: Da estilo al elemento contenedor.
• p-radiobutton-box: Da estilo al contenedor de iconos.
• p-radiobutton-icon: Da estilo al elemento icono.
• p-chkbox-label: Da estilo al elemento de la etiqueta.
• p-label-active: Le da estilo al elemento de etiqueta de un estado marcado.
• p-label-focus: Le da estilo al elemento de etiqueta de un estado enfocado.
• p-label-disabled: Le da estilo al elemento de etiqueta de un estado deshabilitado. 

Creación de aplicaciones angulares e instalación de módulos:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

  ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

  cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

  npm install primeng --save
  npm install primeicons --save

Estructura del proyecto : Se verá como lo siguiente.

Ejemplo 1: este ejemplo básico ilustra el uso del componente RadioButton sin un valor preseleccionado.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG RadioButton component</h5>
<div class="p-field-radiobutton">
  <p-radioButton value="AngularJS" 
                   [(ngModel)]=" gfg" 
                 inputId=" gfg1">
  </p-radioButton>
  <label for=" gfg1">AngularJS</label>
</div>
<div class="p-field-radiobutton">
  <p-radioButton value="ReactJS" 
                 [(ngModel)]=" gfg" 
                 inputId=" gfg2">
  </p-radioButton>
  <label for=" gfg2">ReactJS</label>
</div>
<div class="p-field-radiobutton">
  <p-radioButton value="HTML" 
                 [(ngModel)]=" gfg" 
                 inputId="gfg3">
  </p-radioButton>
  <label for="gfg3">HTML</label>
</div>
<div class="p-field-radiobutton">
  <p-radioButton value="JavaScript" 
                 [(ngModel)]=" gfg" 
                 inputId=" gfg4">
  </p-radioButton>
  <label for=" gfg4">JavaScript</label>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  gfg: string;
}

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { RadioButtonModule } from 'primeng/radiobutton';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RadioButtonModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, estamos creando un grupo de botones de radio dinámicamente con el valor preseleccionado. 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG RadioButton Component</h5>
<div *ngFor="let a of gfg" class="p-field-checkbox">
  <p-radioButton [value]="a" [(ngModel)]="selected">
  </p-radioButton>
  <label [for]="a.key">{{a.name}}</label>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  selected: any = null;
  
  gfg: any[] = [
    { name: 'A' },
    { name: 'B' },
    { name: 'C' },
    { name: 'D' },
    { name: 'E' }
  ];
  
  ngOnInit() {
    this.selected = this.gfg[0];
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { RadioButtonModule } from 'primeng/radiobutton';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RadioButtonModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/radiobutton