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

다음으로, 파일 내나 사용defineCustomElements() 중인 컴포넌IgcRatingComponent 트 파일에서 인수가main.ts 있는.ts 함수를IgcRating 호출해야 합니다.

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

defineComponents(IgcRatingComponent);

또한 스키마를CUSTOM_ELEMENTS_SCHEMA 다음 항목AppModule에 포함해야 합니다:

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에 바인딩formControl 할 수 있어야 하며, 이는 Angular 의ControlValueAccessor 인터페이스 구현이 필요합니다. Ignite UI for Angular 패키지는 지원 웹 컴포넌트에 부착하기 위해 요소 선택기를 사용하는 지시문 형태로 이러한 구현을 제공합니다. 현재 지원하는 유일한 구성 요소는 이IgcRating 카드입니다. 지침을 사용하려면 라이브러리에서 가져오IgcFormsModule 기만 하면 됩니다.

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

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

Note

만약 어느 하나IgcFormsModule 라도ngModel 가져오formControl 고 사용한다면, 커스텀CUSTOM_ELEMENTS_SCHEMA 디렉티브로 태그를 인식igc-rating 할 수 Angular 있으니 더 이상 포함ControlValueAccessor 할 필요가 없습니다.

또는16.0.0 독립 실행형 의존성으로 가져올IgcFormControlDirective 수도 있습니다.

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

예를 들어 등급을 추가하세요. 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

테마