Angular 별점 개요

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

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

    Angular 평가 예

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    Ignite UI for Angular 성급 시작하기

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

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

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

    npm install igniteui-webcomponents --save
cmd

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

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

defineComponents(IgcRatingComponent);
typescript

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

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

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

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

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

    양식에서 Angular Star Rating 사용

    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 { }
typescript

    ​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;
}
typescript

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

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

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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