Visão geral da classificação por estrelas Angular

Rating no Angular representa um widget que permite aos usuários fornecer feedback rapidamente e avaliar um produto ou serviço em uma página da web usando um sistema de classificação por estrelas. Simples de usar, o componente permite que os desenvolvedores configurem o tamanho e o número de itens de classificação por estrelas exibidos.

O componente Ignite UI Angular Star Rating pode ser facilmente instalado a partir do pacote igniteui-webcomponents. Ele fornece uma experiência de classificação intuitiva para usuários finais, permitindo que eles visualizem produtos/serviços e os classifiquem (geralmente tendo a opção de escolher de 0 a 5 estrelas nos cenários mais comuns).

Angular Rating Example

Este exemplo de classificação por estrelas Angular demonstra como você pode usar Ignite UI Angular para criar um widget simples de classificação de cinco estrelas, comparando e exibindo a pontuação de diferentes produtos.

Getting Started with Ignite UI for Angular Star Rating

Ignite UI Rating é um componente web padrão e, como tal, pode ser usado em um aplicativo Angular.

Siga as etapas abaixo para adicionar o pacote Ignite UI Web Components ao seu projeto Angular e configurá-lo para usar o componente.

Primeiro, instale oigniteui-webcomponents pacote

npm install igniteui-webcomponents --save

Em seguida, você deve chamar a função comdefineCustomElements() argumento seja no seuIgcRatingComponent arquivo ou no arquivo componentemain.ts que está usando.ts.IgcRating​

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

defineComponents(IgcRatingComponent);

Você também precisa incluir oCUSTOM_ELEMENTS_SCHEMA esquema em:AppModule​

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

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

Com isso, agora você pode adicionar o componente Rating em um modelo de componente Angular e usar suas entradas e saídas:

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

Using Angular Star Rating in Forms

Em Angular formas, componentes frequentemente precisam ser capazes de vincular seus valores oungModel usarformControl, o que requer uma implementação da interface de Angular.ControlValueAccessor Ignite UI for Angular pacote fornece essa implementação na forma de uma diretiva que usa um seletor de elementos para anexar aos componentes web suportados. AtualmenteIgcRating é o único componente que ele suporta. Para usar a diretiva, basta importarIgcFormsModule da biblioteca.

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

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

Note

Se você estiver importandoIgcFormsModule e usando qualquer umngModel dos doisformControl, não precisa mais incluirCUSTOM_ELEMENTS_SCHEMA, pois Angular reconhecerá aigc-rating tag pela diretiva personalizadaControlValueAccessor.

Alternativamente,16.0.0 você pode importar comoIgcFormControlDirective uma dependência independente.

// 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;
}

Adicione uma classificação com, por exemplo, ngModel para valor e ela será vinculada bidirecionalmente ao seu modelo sem problemas.

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

O aplicativo a seguir mostra um exemplo de como essa integração funciona em um caso de uso real com formulários.

Para mais informações sobre o uso do componente Classificação, você pode conferir este tópico.