Angular を使用して星評価システムを構築する

このチュートリアルでは、Bootstrap 5 ライブラリを使用して Angular 14 アプリで星評価コンポーネントを構築する方法を学びます。このビデオでは、ユーザーが製品、サービス、またはその他のコンテンツを評価するために操作できる星評価コンポーネントを作成する方法を学びます。また、星評価コンポーネントのスタイルを設定し、それをデータにバインドする方法も学習します。

Angular 14 アプリケーションで星評価コンポーネントを構築するには、次の手順に従います。
 

• ステップ 1 – 新しい Angular アプリを作成する
• ステップ 2 – マークされたパーサー パッケージをインストールする
• ステップ 3 – Angular に NGBootstrap をインストールする
• ステップ 4 – ビューファイルにスターを作成する
• ステップ 5 – コンポーネント ts ファイルにコンポーネントをインポートする
• ステップ 6 – Angular Star Rating アプリを開始する

ステップ 1: 新しい Angular アプリを作成する

まず、ターミナルを開いて次のコマンドを実行して、Angular アプリをインストールします。

ng new my-new-app

ステップ 2: マークされたパーサー パッケージをインストールする

次に、マークされた Markdown パーサー プラグインを NPM 経由でインストールします。これは、長期間キャッシュしたりブロックしたりせずに Markdown を解析するための低レベルで強力なコンパイラーです。したがって、ターミナルで次のコマンドを実行してパッケージをインストールできます。

npm i marked

ステップ 3: Angular に NGBootstrap をインストールする

このステップでは、ターミナルを開き、次のコマンドを実行して ng-bootstrap パッケージをインストールします。

ng add @ng-bootstrap/ng-bootstrap

ステップ 4: ビュー ファイルにスターを作成する

このステップでは、Angular アプリで星評価を作成します。したがって、src/app/ およびapp.component.htmlにアクセスし、次のコードを更新します。

<h2>Angular 14 Star Rating Example</h2>
 
<ngb-rating [max]="5" [(rate)]="starRating" [readonly]="false"></ngb-rating>

ステップ 5: コンポーネント ts ファイルにコンポーネントをインポートする

このステップでは、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; 
 
}

ステップ 6: Angular Star Rating アプリを開始する

このステップでは、ターミナルで次のコマンドを実行して、Angular Star Rating アプリを起動します。

ng serve

このステップバイステップのチュートリアルを使用すると、Bootstrap 5 ライブラリを使用して Angular 14 アプリで星評価コンポーネントを構築できるようになります。