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 o pacote igniteui-webcomponents​

npm install igniteui-webcomponents --save

Em seguida, você deve chamar a função defineCustomElements() com o argumento IgcRatingComponent no seu arquivo main.ts ou no arquivo.ts do componente que está usando IgcRating.

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

defineComponents(IgcRatingComponent);

Você também precisa incluir o esquema CUSTOM_ELEMENTS_SCHEMA no 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 formulários Angular, os componentes geralmente precisam ser capazes de vincular seus valores com ngModel ou usar formControl, o que requer uma implementação da interface ControlValueAccessor do Angular. O pacote Ignite UI for Angular fornece essa implementação na forma de uma diretiva que usa um seletor de elemento para anexar a componentes da web suportados. Atualmente, IgcRating é o único componente que ele suporta. Para usar a diretiva, você só precisa importar IgcFormsModule da biblioteca.

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

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

Note

Se você estiver importando IgcFormsModule e usando ngModel ou formControl, não precisará mais incluir CUSTOM_ELEMENTS_SCHEMA, pois Angular reconhecerá a tag igc-rating pela diretiva ControlValueAccessor personalizada.

Como alternativa, a partir da 16.0.0 você pode importar o IgcFormControlDirective como uma dependência autônoma.

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

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.