Как работает библиотека PrimeNG в Angular

PrimeNG — это альтернативная библиотека компонентов пользовательского интерфейса, разработанная PrimeFaces. Она предлагает широкий выбор готовых тем и компонентов UI для представления данных, форм ввода, меню, диаграмм и многого другого.

В этой статье вы узнаете, как настроить PrimeNG в проекте Angular 4+, а также изучите некоторые основные компоненты библиотеки.

Требования

Это руководство протестировано на Node v16.6.1, npm v7.20.3, @angular/core v12.2.0, primeng v12.0.1 и primeicons v4.1.0.

Создание проекта

Используем @angular/cli для создания нового проекта Angular.

В окне терминала используйте следующую команду:

ng new AngularPrimeNGExample --style=css --routing=false --skip-tests

Команда создаст новый проект Angular со стилями CSS (также поддерживаются Sass, Less и Stylus), без маршрутизации и тестирования.

Перейдите в только что созданный каталог проекта:

cd AngularPrimeNGExample

Для начала установим в свой свежий проект необходимые пакеты: primeng и primeicons:

npm install primeng@12.0.1 primeicons@4.1.0

Итак, на данный момент у нас есть новый проект Angular с библиотеками Primeng и Primeicons.

Добавление стилей PrimeNG

Теперь мы добавим в файл angular.json необходимые файлы CSS как часть стилей, загружаемых Angular CLI:

...
"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

Теперь давайте настроим модуль нашего приложения (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. Модуль BrowserAnimationsModule требуется для поддержки компонентов PrimeNG, а FormsModule — для использования компонентов ввода.

На данный момент у нас есть свежий проект Angular с поддержкой AccordionModule, PanelModule, ButtonModule и RadioButtonModule.

Создание приложения с компонентами PrimeNG

Вот пример, в котором используются компоненты accordion, panel, radio button и button.

Добавим в src/app/app.component.ts раздел pizzaSelection:

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:

<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-.

Сохраните изменения в файле и откройте приложение.

Если вы выберете Pizza, появится панель Extras и предложит дополнения к пицце.

Итоги

Этот краткий мануал научил вас настраивать PrimeNG в проекте Angular 4+. Также мы изучили некоторые основные компоненты.

Если вы хотите продолжить изучение данной темы, ознакомьтесь с официальной документацией, где вы найдете описание всех доступных компонентов.

Tags: ,

Добавить комментарий