Angular 별 등급 개요

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

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

Angular Rating Example

이 Angular 별표 평가 예는 Ignite UI Angular 사용하여 간단한 별 5개 등급 위젯을 구축하고 다양한 제품의 점수를 비교하고 표시하는 방법을 보여줍니다.

Getting Started with Ignite UI for Angular Star Rating

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

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

먼저 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

테마