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 un sistema de calificación de estrellas. Fácil de usar, el componente permite a los desarrolladores configurar el tamaño y la cantidad de elementos de calificación de estrellas que se muestran.

El componente Angular Star Rating Ignite UI 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 con la opción de elegir entre 0 y 5 estrellas en los escenarios más comunes).

Angular Rating Example

Este ejemplo de calificación de estrellas Angular demuestra cómo puedes 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, puede usarse en una aplicación Angular.

Siga los pasos a continuación para agregar el paquete Ignite UI Web Components a su proyecto Angular y configúrelo 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 esto ahora puedes agregar el componente Rating 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 Angular formas, los componentes a menudo necesitan ser capaces de vincular sus valores con ngModel o usar formControl, lo que requiere una implementación de la interfaz de Angular ControlValueAccessor. Ignite UI for Angular paquete 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 usa 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.