Componente de calificación PrimeNG de Angular

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 de calificación en Angular PrimeNG. Aprendamos sobre las propiedades, los eventos y el estilo junto con sus sintaxis que se usarán en el código. 

Componente de calificación: Se utiliza para representar la calificación otorgada por el usuario.

Propiedades:

• estrellas: Indica el número de estrellas a mostrar. Es de tipo de dato numérico, el valor por defecto es 5.
• cancelar: Muestra un icono de cancelación que restablece todos los valores de las estrellas. Es del tipo de dato booleano, el valor predeterminado es verdadero.
• disabled: cuando se establece en true, la calificación debe estar deshabilitada. Es del tipo de dato booleano, el valor por defecto es false.
• readonly: No podemos cambiar el valor del componente. Es del tipo de dato booleano, el valor por defecto es false.
• iconOnClass: Se utiliza para establecer la clase del icono ‘on’. Es de tipo de datos de string, el valor predeterminado es pi pi-star.
• iconOffClass: Se utiliza para establecer la clase del icono de ‘apagado’. Es de tipo de datos de string, el valor predeterminado es pi pi-star.
• iconCancelClass: Se utiliza para establecer la clase del icono ‘cancelar’. Es de tipo de datos de string, el valor predeterminado es pi pi-ban.
• iconOnStyle: se utiliza para establecer el estilo en línea del icono ‘on’. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• iconOffStyle: se utiliza para establecer el estilo en línea del icono ‘apagado’. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• iconCancelStyle: se utiliza para establecer el estilo en línea del icono ‘cancelar’. Es de tipo de datos de objeto, el valor predeterminado es nulo.

Eventos:

• onRate: es una devolución de llamada que se activa en el cambio de tasa.
• onCancel: es una devolución de llamada que se activa cuando se elimina el valor.

Estilo:

• p-rating: Es un elemento contenedor.
• p-rating-star: Es un elemento estrella.
• p-rating-star-on: Muestra el elemento estrella seleccionado.
• p-rating-cancel: Muestra el icono de cancelar.

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 de calificación. 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Rating component</h5>
<p-rating [cancel]="false"></p-rating>

import { Component } from '@angular/core';
  
@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 { RatingModule } from "primeng/rating";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            RatingModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad cancelar en el componente Calificación.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Rating component</h5> 
<p-rating cancel='true'></p-rating>

import { Component } from '@angular/core';
  
@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 { RatingModule } from "primeng/rating";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            RatingModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 3: En este ejemplo, sabremos cómo usar la propiedad readOnly en el componente Rating.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Rating component</h5>
<p-rating readonly="true" cancel="true"></p-rating>

import { Component } from '@angular/core';
  
@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 { RatingModule } from "primeng/rating";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            RatingModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

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