Componente Angular PrimeNG ToggleButton

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 ToggleButton en Angular PrimeNG.

El componente ToggleButton se usa para crear un botón que los usuarios pueden alternar haciendo clic en él. 

Propiedades:

• onLabel: se utiliza para establecer la etiqueta para el estado activado. Es de tipo de datos de string, el valor predeterminado es nulo.
• offLabel: Se utiliza para establecer la etiqueta para el estado apagado. Es de tipo de datos de string, el valor predeterminado es nulo.
• onIcon: se utiliza para configurar el icono para el estado activado. Es de tipo de datos de string, el valor predeterminado es nulo.
• offIcon: Se utiliza para configurar el icono para el estado apagado. Es de tipo de datos de string, el valor predeterminado es nulo.
• iconPos: Se utiliza para establecer la posición del icono, los valores válidos son «izquierda» y «derecha». Es de tipo de datos de string, se deja el valor predeterminado.
• estilo: se utiliza para establecer el estilo en línea 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.
• disabled : Especifica que el elemento debe estar deshabilitado. Es de un tipo de dato booleano, el valor por defecto es falso.
• tabindex : se utiliza para establecer el índice del elemento en orden de tabulación. Es de tipo de dato numérico, el valor por defecto 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
• ariaLabel: Se utiliza para definir una string que etiqueta el elemento de entrada, es de tipo string de datos, el valor por defecto es nulo.

Evento:

• onChange: es una devolución de llamada que se activa en el cambio de estado.

Estilo:

• p-togglebutton: Es un elemento contenedor de estilo
• p-button-icon-left: Es un elemento Icon de estilo.
• p-button-icon-right: Es un elemento Icon de estilo.
• p-button-text: Es un elemento de etiqueta de estilo.

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 es el ejemplo básico que muestra cómo usar el componente ToggleButton.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ToggleButton Component</h5>
<p-toggleButton
  [(ngModel)]="checked1"
  onIcon="pi pi-caret-left"
  offIcon="pi pi-caret-right"
  onLabel="ToggleButton Component"
  offLabel="Enabled Button">
</p-toggleButton>
  
<p-toggleButton
  [(ngModel)]="checked2"
  onIcon="pi pi-caret-left"
  offIcon="pi pi-caret-right"
  [disabled]
  onLabel="ToggleButton Component"
  offLabel="Disabled Button">
</p-toggleButton>

import { Component } from "@angular/core";
import { SelectItem, PrimeNGConfig } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  constructor(private primengConfig: PrimeNGConfig) {}
  
  ngOnInit() {
    this.primengConfig.ripple = true;
  }
  
  checked1: boolean = false;
  
  checked2: boolean = false;
}

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

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad iconPos en el componente toggleButton. 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ToggleButton Component</h5>
<p-toggleButton
  [(ngModel)]="checked1"
  onIcon="pi pi-caret-left"
  offIcon="pi pi-caret-right"
  onLabel="ToggleButton Component"
  offLabel="GeeksforGeeks"
  iconPos="right">
</p-toggleButton>
  
<p-toggleButton
  [(ngModel)]="checked2"
  onIcon="pi pi-caret-left"
  offIcon="pi pi-caret-right"
  onLabel="ToggleButton Component"
  offLabel="GeeksforGeeks">
</p-toggleButton>

import { Component } from "@angular/core";
import { SelectItem, PrimeNGConfig } from "primeng/api";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  constructor(private primengConfig: PrimeNGConfig) {}
  
  ngOnInit() {
    this.primengConfig.ripple = true;
  }
  
  checked1: boolean = false;
  
  checked2: boolean = false;
}

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

Producción:

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