Componente de perilla angular PrimeNG

En este artículo, sabremos cómo usar el componente Knob en Angular PrimeNG.

Componente de perilla: Es un componente de formulario que se utiliza para definir una perilla de tipo marcador que contiene etiquetas y algunos valores de datos.

Propiedades:

• tamaño: Se utiliza para establecer el tamaño del componente en píxeles. Es de tipo de dato numérico, el valor por defecto es 100.
• disabled: Especifica que el elemento debe estar deshabilitado. Es del tipo de dato booleano, el valor por defecto es falso.
• readonly: Se utiliza para especificar que el componente no se puede editar. Es del tipo de dato booleano, el valor por defecto es falso.
• min: Se utiliza para establecer el valor límite mínimo. Es de tipo de dato numérico, el valor por defecto es 0.
• max: Se utiliza para establecer el valor límite máximo. Es de tipo de dato numérico, el valor por defecto es 100.
• paso: Se utiliza para establecer el factor de paso para incrementar/decrementar el valor. Es de tipo de dato numérico, el valor por defecto es nulo.
• valueColor: Se utiliza para establecer el fondo del valor. Es de tipo de datos de string, el valor predeterminado es nulo.
• rangeColor: Se utiliza para establecer el color de fondo del rango. Es de tipo de dato numérico, el valor por defecto es nulo.
• textColor: Se utiliza para establecer el color del texto de valor. Es de tipo de dato numérico, el valor por defecto es nulo.
• strokeWidth: se utiliza para establecer el ancho del trazo de la perilla. Es de tipo de dato numérico, el valor por defecto es 14.
• showValue: se utiliza para especificar si mostrar el valor dentro de la perilla. Es del tipo de datos booleano, el valor predeterminado es verdadero.
• valueTemplate: se utiliza para establecer la string de plantilla del valor. Es de tipo de datos de string, el valor predeterminado es valor.
• estilo: Se utiliza para establecer el estilo Inline 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.

Eventos:

• onChange: Es una devolución de llamada que se activa cuando cambia el valor.

Estilo:

• p-knob: Es un elemento contenedor de estilo.
• p-knob-text: es un elemento de estilo de texto.
• p-knob-value: Es un elemento de estilo Value.
• p-knob-text: es un elemento de estilo de texto.

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 : después de completar el proceso de instalación, tendrá el siguiente aspecto.

Ejemplo 1: En este paso, veremos el ejemplo básico que ilustra el uso del componente de perilla. 

<h2 style="color: green">GeeksforGeeks</h2>
<h5>PrimeNG Knob component</h5>
<div class="p-field p-col-12 p-md-4">
    
  <h4>Basic</h4>
  <p-knob
    [size]="150"
    [strokeWidth]="9"
    valueColor="green"
    rangeColor="navy">
  </p-knob>
    
  <h4>Disabled</h4>
  <p-knob
    [size]="150"
    [strokeWidth]="9"
    valueColor="Green"
    rangeColor="grey"
    [disabled]="true">
  </p-knob>
</div>

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

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad de pasos y trazo en el componente de perilla. 

<h2 style="color: green">GeeksforGeeks</h2>
<h5>PrimeNG Knob component</h5>
  
<div class="p-field p-col-12 p-md-4">
  <h5>Step</h5>
  <p-knob
    [size]="150"
    [strokeWidth]="9"
    valueColor="Green"
    rangeColor="Blue"
    [step]="10">
  </p-knob>
</div>
  
<div class="p-field p-col-12 p-md-4">
  <h5>Stroke</h5>
  <p-knob
    [size]="150"
    [strokeWidth]="9"
    valueColor="Green"
    rangeColor="Blue"
    [step]="10"
    [strokeWidth]="5">
  </p-knob>
</div>

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

Producción:

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