Componente SelectButton de 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 SelectButton en Angular PrimeNG.

Componente SelectButton: Se utiliza para hacer un grupo de botones de los cuales el usuario puede seleccionar un valor. 

Propiedades:

• opciones : es una array que representa los elementos seleccionados para mostrar como las opciones disponibles. Es de tipo de datos de array, el valor predeterminado es nulo.
• optionLabel : Se utiliza para dar la etiqueta de una opción. Es de tipo de datos de string, el valor predeterminado es la etiqueta.
• optionValue : se utiliza para dar el valor de una opción, por defecto es la propia opción cuando no está definida. Es de tipo de datos de string, el valor predeterminado es valor.
• multiple : Se utiliza para establecer cuando se especifica, permite seleccionar múltiples valores. Es del tipo de dato booleano, el valor por defecto es false.
• tabindex : se utiliza para establecer el orden de tabulación especificado del elemento. Es de tipo de dato numérico, el valor por defecto es 0.
• style : Se utiliza para establecer el estilo Inline del elemento. Es de tipo de datos de string, 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.
• ariaLabelledBy: Se utiliza para establecer las 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.
• disabled : Especifica que el elemento debe estar deshabilitado, es del tipo de dato booleano, el valor por defecto es false.
• dataKey : Es la propiedad que se utiliza para identificar una opción, es de tipo de datos de string, el valor predeterminado es nulo.

Evento:

• onChange: es una devolución de llamada que se activa cuando cambia el valor.
• onOptionClick: es una devolución de llamada que se dispara cuando se hace clic en un botón.

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á así:

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente SelectButton.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG SelectButton component</h5>
<p-selectButton [options]="gfg"></p-selectButton>

import { Component } from "@angular/core";
import { PrimeNGConfig } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html"
})
export class AppComponent {
  gfg: any[];
  
  constructor(private primeNGConfig: PrimeNGConfig) {
    this.gfg = [
      { label: "Off", value: "off" },
      { label: "On", value: "on" }
    ];
  }
  
  ngOnInit() {
    this.primeNGConfig.ripple = true;
  }
}

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 { SelectButtonModule } from "primeng/selectbutton";
import { ButtonModule } from "primeng/button";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SelectButtonModule,
    ButtonModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar múltiples propiedades en el componente selectButton.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG SelectButton component</h5>
<p-selectButton [options]="gfg" multiple="true"></p-selectButton>

import { Component } from "@angular/core";
import { PrimeNGConfig } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  gfg: any[];
  
  constructor(private primeNGConfig: PrimeNGConfig) {
    this.gfg = [
      { label: "Selection 1", value: 1 },
      { label: "Selection 2", value: 2 },
      { label: "Selection 3", value: 3 },
    ];
  }
  
  ngOnInit() {
    this.primeNGConfig.ripple = true;
  }
}

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 { SelectButtonModule } from "primeng/selectbutton";
import { ButtonModule } from "primeng/button";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SelectButtonModule,
    ButtonModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

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