Angular 별점 개요

Angular의 Rating은 사용자가 별점 시스템을 사용하여 웹 페이지에서 제품이나 서비스에 대한 피드백을 빠르게 제공하고 평가할 수 있는 위젯을 나타냅니다. 사용하기 쉬운 이 구성 요소를 통해 개발자는 표시되는 별점 항목의 크기와 개수를 구성할 수 있습니다.

Ignite UI Angular Star Rating 구성 요소는 igniteui-webcomponents 패키지에서 쉽게 설치할 수 있습니다. 최종 사용자에게 직관적인 평가 경험을 제공하여 제품/서비스를 보고 평가할 수 있습니다(일반적으로 가장 일반적인 시나리오에서 0~5개의 별 중에서 선택할 수 있는 옵션이 있음).

Angular Rating Example

이 Angular Star Rating 예제는 Ignite UI Angular 사용하여 간단한 5성 평가 위젯을 만들고, 다양한 제품의 점수를 비교하고 표시하는 방법을 보여줍니다.

Getting Started with Ignite UI for Angular Star Rating

Ignite UI Rating은 표준 웹 구성 요소 이므로 Angular 애플리케이션에서 사용할 수 있습니다.

아래 단계에 따라 Angular 프로젝트에 Ignite UI Web Components 패키지를 추가하고 해당 구성 요소를 사용하도록 설정하세요.

먼저 igniteui-webcomponents 패키지를 설치합니다.

npm install igniteui-webcomponents --save

다음으로, main.ts 파일이나 IgcRating 사용하는 구성 요소.ts 파일에서 IgcRatingComponent 인수를 사용 defineCustomElements() 함수를 호출해야 합니다.

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

defineComponents(IgcRatingComponent);

또한 AppModule에 CUSTOM_ELEMENTS_SCHEMA 스키마를 포함해야 합니다.

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

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

이제 이를 사용하면 Angular 구성 요소 템플릿에 Rating 구성 요소를 추가하고 해당 입력 및 출력을 사용할 수 있습니다.

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

Using Angular Star Rating in Forms

Angular 폼에서 구성 요소는 종종 ngModel에 값을 바인딩하거나 Angular의 ControlValueAccessor 인터페이스 구현이 필요한 formControl 사용할 수 있어야 합니다. Ignite UI for Angular 패키지는 지원되는 웹 구성 요소에 연결하기 위해 요소 선택기를 사용하는 지시문 형태로 이러한 구현을 제공합니다. 현재 IgcRating 지원하는 유일한 구성 요소입니다. 지시문을 사용하려면 라이브러리에서 IgcFormsModule 가져오기만 하면 됩니다.

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

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

Note

IgcFormsModule 가져오고 ngModel 또는 formControl 사용하는 경우 Angular 사용자 정의 ControlValueAccessor 지시문을 통해 igc-rating 태그를 인식하므로 더 이상 CUSTOM_ELEMENTS_SCHEMA 포함할 필요가 없습니다.

또는 16.0.0부터 IgcFormControlDirective 독립형 종속성으로 가져올 수 있습니다.

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

예를 들어 등급을 추가하세요. ngModel을 사용하면 문제 없이 모델과 양방향으로 바인딩됩니다.

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

다음 애플리케이션은 양식을 사용한 실제 사용 사례에서 이 통합이 어떻게 작동하는지에 대한 한 가지 예를 보여줍니다.

등급 구성 요소 사용에 대한 자세한 내용은이 항목을 확인하세요.

Angular 별점 개요

Angular Rating Example

Getting Started with Ignite UI for Angular Star Rating

Using Angular Star Rating in Forms

Note

테마