Descripción general de la clasificación de estrellas Angular

La calificación en Angular representa un widget que permite a los usuarios proporcionar comentarios y evaluar rápidamente un producto o servicio en una página web mediante el uso de un sistema de calificación de estrellas. El componente, fácil de usar, permite a los desarrolladores configurar el tamaño y la cantidad de elementos de calificación de estrellas mostrados.

El componente Ignite UI Angular Star Rating se puede instalar fácilmente desde el paquete igniteui-webcomponents. Proporciona una experiencia de calificación intuitiva para los usuarios finales, permitiéndoles ver productos/servicios y calificarlos (generalmente teniendo la opción de elegir de 0 a 5 estrellas en los escenarios más comunes).

Angular Rating Example

Este ejemplo Angular Star Rating demuestra cómo puede usar Ignite UI Angular para crear un widget de calificación de cinco estrellas simple, comparando y mostrando la puntuación de diferentes productos.

Getting Started with Ignite UI for Angular Star Rating

Ignite UI Rating es un componente web estándar y, como tal, se puede utilizar en una aplicación Angular.

Siga los pasos a continuación para agregar el paquete Web Components Ignite UI a su proyecto Angular y configurarlo para usar el componente.

Primero, instale el paquete igniteui-webcomponents​

npm install igniteui-webcomponents --save

A continuación, debe llamar a la función defineCustomElements() con el argumento IgcRatingComponent ya sea en su archivo main.ts o en el archivo.ts del componente que usa IgcRating.

import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';

defineComponents(IgcRatingComponent);

También debe incluir el esquema CUSTOM_ELEMENTS_SCHEMA en AppModule:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Con estos, ahora puede agregar el componente Clasificación en una plantilla de componente Angular y usar sus entradas y salidas:

<igc-rating value="ratingVal" min="1" max="5" (igcChange)="ratingChanged($event);"></igc-rating>

Using Angular Star Rating in Forms

En los formularios Angular, los componentes a menudo necesitan poder vincular sus valores con ngModel o usar formControl, lo que requiere una implementación de la interfaz ControlValueAccessor de Angular. El paquete Ignite UI for Angular proporciona dicha implementación en forma de una directiva que utiliza un selector de elementos para adjuntar a los componentes web compatibles. Actualmente IgcRating es el único componente que admite. Para usar la directiva solo necesita importar IgcFormsModule desde la biblioteca.

import { IgcFormsModule } from 'igniteui-angular';
// import { IgcFormsModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        IgcFormsModule
    ]
})
export class AppModule { }

Note

Si está importando IgcFormsModule y utilizando ngModel o formControl, ya no necesita incluir CUSTOM_ELEMENTS_SCHEMA ya que Angular reconocerá la etiqueta igc-rating mediante la directiva personalizada ControlValueAccessor.

Alternativamente, a partir de 16.0.0 puede importar IgcFormControlDirective como una dependencia independiente.

// home.component.ts

import { FormsModule } from '@angular/forms';
import { IgcFormControlDirective } from 'igniteui-angular';
// import { IgcFormControlDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igc-rating name="modelRating" [(ngModel)]="product.Rating" max="10" label="Model Rating"></igc-rating>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgcFormControlDirective, FormsModule]
})
export class HomeComponent {
    public product: Product;
}

Agregue una calificación con p.e. ngModel por valor y se vinculará bidireccionalmente con su modelo sin problemas.

<igc-rating name="modelRating" [(ngModel)]="model.Rating" max="10" label="Model Rating"></igc-rating>

La siguiente aplicación muestra un ejemplo de cómo funciona esta integración en un caso de uso real con formularios.

Para obtener más información sobre el uso del componente Clasificación, puede consultar este tema.