Rating (評価)

    Ignite UI Rating コンポーネントを使用すると、ユーザーのフィードバックを表示および入力できます。

    Angular 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);
    

    また、AppModuleCUSTOM_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>
    

    Angular フォームで Rating を使用する

    Angular フォームでは、多くの場合、コンポーネントはその値を ngModel にバインドしたり、Angular の ControlValueAccessor インターフェイスの実装を必要とする formControl を使用したりできる必要があります。Ignite UI for Angular パッケージは、要素セレクターを使用してサポートされているウェブ コンポーネントにアタッチするディレクティブの形式で、このような実装を提供します。現在、サポートされているコンポーネントは IgcRating のみです。ディレクティブを使用するには、ライブラリから IgcFormsModule をインポートするだけです。

    import { IgcFormsModule } from 'igniteui-angular';
    
    @NgModule({
        imports: [
            IgcFormsModule
        ]
    })
    export class AppModule { }
    
    Note

    IgcFormsModule をインポートして ngModel または formControl を使用する場合、Angular はカスタム ControlValueAccessor ディレクティブによって igc-rating タグを認識するため、CUSTOM_ELEMENTS_SCHEMA を含める必要はありません。

    たとえば、値に ngModel を使用して評価を追加すると、問題なくモデルと双方向にバインドされます。

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

    次のアプリケーションは、フォームを使用した実際のユースケースでこの統合がどのように機能するかを示す一例です。

    Rating コンポーネントの使用方法の詳細については、このトピックを参照してください。