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, instala eligniteui-webcomponents paquete

npm install igniteui-webcomponents --save

A continuación, deberías llamar a ladefineCustomElements() función conIgcRatingComponent argument ya sea en tumain.ts archivo o en el archivo de componentes.ts que estás usandoIgcRating.

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

defineComponents(IgcRatingComponent);

También necesitas incluir elCUSTOM_ELEMENTS_SCHEMA esquema en elAppModule:

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 formularios, los componentes a menudo necesitan poder vincular sus valores ongModel usarformControl, lo que requiere una implementación de la interfaz deControlValueAccessor Angular. Ignite UI for Angular paquete proporciona dicha implementación en forma de directiva que utiliza un selector de elementos para adjuntar a los componentes web compatibles. ActualmenteIgcRating es el único componente que soporta. Para usar la directiva solo necesitas importarIgcFormsModule desde la biblioteca.

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

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

Note

Si importasIgcFormsModule y usas cualquiera de lasngModel dosformControl, ya no necesitas incluirlaCUSTOM_ELEMENTS_SCHEMA porque Angular reconocerás laigc-rating etiqueta por la directiva personalizadaControlValueAccessor.

Alternativamente,16.0.0 puedes importarlosIgcFormControlDirective como una dependencia independiente.

// home.component.ts

import { FormsModule } from '@angular/forms';
import { IgcFormControlDirective } from 'igniteui-angular/directives';
// 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.