このチュートリアルでは、Bootstrap 5 ライブラリを使用して Angular 14 アプリで星評価コンポーネントを構築する方法を学びます。このビデオでは、ユーザーが製品、サービス、またはその他のコンテンツを評価するために操作できる星評価コンポーネントを作成する方法を学びます。また、星評価コンポーネントのスタイルを設定し、それをデータにバインドする方法も学習します。
Angular 14 アプリケーションで星評価コンポーネントを構築するには、次の手順に従います。
まず、ターミナルを開いて次のコマンドを実行して、Angular アプリをインストールします。
ng new my-new-app
次に、マークされた Markdown パーサー プラグインを NPM 経由でインストールします。これは、長期間キャッシュしたりブロックしたりせずに Markdown を解析するための低レベルで強力なコンパイラーです。したがって、ターミナルで次のコマンドを実行してパッケージをインストールできます。
npm i marked
このステップでは、ターミナルを開き、次のコマンドを実行して ng-bootstrap パッケージをインストールします。
ng add @ng-bootstrap/ng-bootstrap
このステップでは、Angular アプリで星評価を作成します。したがって、src/app/ およびapp.component.htmlにアクセスし、次のコードを更新します。
<h2>Angular 14 Star Rating Example</h2>
<ngb-rating [max]="5" [(rate)]="starRating" [readonly]="false"></ngb-rating>
このステップでは、src/app ディレクトリにアクセスし、 app.component.ts を開きます。次に、次のコードをcomponent.tsファイルに追加します。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
starRating = 0;
}
このステップでは、ターミナルで次のコマンドを実行して、Angular Star Rating アプリを起動します。
ng serve
このステップバイステップのチュートリアルを使用すると、Bootstrap 5 ライブラリを使用して Angular 14 アプリで星評価コンポーネントを構築できるようになります。