Componente de interruptor de entrada 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 InputSwitch en Angular PrimeNG. Aprenderemos sobre las propiedades, los eventos y el estilo junto con sus sintaxis que se utilizarán en el código.

Componente InputSwitch: permite al usuario hacer un cambio entre los dos valores, es decir, seleccionar cualquiera de los valores al cambiarlo.

Propiedades:

• 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.
• 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.
• name : Se utiliza para establecer el nombre del elemento de entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• ariaLabelledBy : Esta propiedad 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.
• disabled : Especifica que el elemento debe estar deshabilitado. Es del tipo de datos booleano, el valor predeterminado es falso.
• readonly : especifica que el componente no se puede editar. Es del tipo de datos booleano, el valor predeterminado es falso.

Evento:

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

Estilo:

• p-inputswitch: Es un elemento contenedor.
• p-inputswitch-checked: Es un elemento contenedor en estado activo.
• p-inputswitch-slider: Es un elemento deslizante detrás del controlador.

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 InputSwitch. 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG InputSwitch component</h5>
<p-inputSwitch></p-inputSwitch>

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {}

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

Producción:

Ejemplo 2: en este ejemplo, estamos haciendo una preselección de interruptor de entrada, utilizando la propiedad deshabilitada y de solo lectura.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG InputSwitch Component</h5>
<p-inputSwitch [(ngModel)]="gfg"></p-inputSwitch>
<p-inputSwitch disabled="true"></p-inputSwitch>
<p-inputSwitch readonly="true"></p-inputSwitch>

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  gfg: boolean = 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 { InputSwitchModule } from "primeng/inputswitch";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    InputSwitchModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

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