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、およびprimeiconsv4で検証されました。 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コンポーネントライブラリを探索します。