AngularでPrimeNGコンポーネントを使用する方法
序章
PrimeFacesのPrimeNGは、代替UIコンポーネントライブラリです。 データ表示、フォーム入力、メニュー、チャート、オーバーレイなどの事前に作成されたテーマとUIコンポーネントの選択を提供します。
この記事では、Angular 4+プロジェクトでPrimeNGをセットアップし、いくつかの主要コンポーネントについて説明します。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- このチュートリアルでは、 @ angle /cliがグローバルにインストールされていることも前提としています。
このチュートリアルは、ノードv16.6.1、npm
v7.20.3、@angular/core
v12.2.0、primeng
v12.0.1、およびprimeicons
v4で検証されました。 1.0。
プロジェクトの設定
@ angle / cli を使用して、新しいAngularプロジェクトを作成できます。
ターミナルウィンドウで、次のコマンドを使用します。
ng new AngularPrimeNGExample --style=css --routing=false --skip-tests
これにより、スタイルが「CSS」(「Sass」、「Less」、「Stylus」ではなく)に設定され、ルーティングがなく、テストがスキップされる新しいAngularプロジェクトが構成されます。
新しく作成されたプロジェクトディレクトリに移動します。
cd AngularPrimeNGExample
開始するには、必要なパッケージprimeng
およびprimeicons
をプロジェクトにインストールします。
npm install [email protected] [email protected]
この時点で、primeng
とprimeicons
を使用した新しいAngularプロジェクトがあります。
PrimeNGスタイルの追加
次に、AngularCLIによってロードされるスタイルの一部として必要なCSSファイルを追加します。
angle.json(部分的)
... "styles": [ "styles.css", "node_modules/font-awesome/css/font-awesome.min.css", "node_modules/primeng/resources/primeng.min.css", "node_modules/primeng/resources/themes/saga-blue/theme.css" ], ...
- 注:
angular.json
構成ファイルに追加した後、ローカルサーバーを再起動する必要があります。
- 注:
ここではsaga-blue
テーマを使用していますが、nova
、rhea
、fluent-light
などの利用可能なテーマから選択できます。
PrimeNGコンポーネントのインポート
次に、必要なUIコンポーネントを含めるようにアプリモジュールを設定しましょう。
src / app / app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule } from '@angular/forms'; import { AccordionModule } from 'primeng/accordion'; import { PanelModule } from 'primeng/panel'; import { ButtonModule } from 'primeng/button'; import { RadioButtonModule } from 'primeng/radioButton'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, AccordionModule, PanelModule, ButtonModule, RadioButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
AngularのBrowserAnimationsModule
とFormsModule
もインポートしたことに注目してください。 アニメーションモジュールはPrimeNGのコンポーネントに必要であり、フォームモジュールはラジオボタンコンポーネントなどのフォーム入力コンポーネントを使用するために必要になります。
この時点で、AccordionModule
、PanelModule
、ButtonModule
、およびRadioButtonModule
をサポートする新しいAngularプロジェクトがあります。
PrimeNGコンポーネントを使用したアプリの構築
PrimeNGのaccordion
、panel
、radio button
、およびbutton
コンポーネントを使用する例を次に示します。
pizzaSelection
を追加します:
src / app / app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { pizzaSelection = '' }
次に、p-accordion
、p-accordionTab
、p-radioButton
、p-panel
、およびpButton
を追加します。
src / app / app.component.html
<p-accordion> <p-accordionTab header="Salads"> Salads... </p-accordionTab> <p-accordionTab header="Pasta"> Pasta... </p-accordionTab> <p-accordionTab header="Pizza" [selected]="true"> <div> <p-radioButton label="Double cheese" name="pizza" value="double-cheese" [(ngModel)]="pizzaSelection"> </p-radioButton> </div> <div> <p-radioButton label="Anchovy" name="pizza" value="anchovy" [(ngModel)]="pizzaSelection"> </p-radioButton> </div> <div> <p-radioButton label="Meatlover's" name="pizza" value="meat-lover" [(ngModel)]="pizzaSelection"> </p-radioButton> </div> </p-accordionTab> </p-accordion> <p-panel header="Extras" *ngIf="pizzaSelection && pizzaSelection.length"> Would you like extra cheese on your pizza? <button pButton type="button" label="Ok, yeah!"></button> </p-panel>
コンポーネントがp-
プレフィックスをどのように使用しているかに注意してください。
変更をファイルに保存して、アプリケーションを提供します。
ピザを選択すると、 Extras パネルが表示され、ユーザーにチーズを追加するように求められます。
結論
この記事では、Angular 4+プロジェクトでPrimeNGをセットアップし、いくつかの主要コンポーネントについて説明します。
利用可能なすべてのコンポーネントのショーケースとドキュメントについては、公式ドキュメントを参照して学習を続けてください。
Angle Material2を使用して代替UIコンポーネントライブラリを探索します。