Как работает библиотека PrimeNG в Angular
Development | Комментировать запись
PrimeNG — это альтернативная библиотека компонентов пользовательского интерфейса, разработанная PrimeFaces. Она предлагает широкий выбор готовых тем и компонентов UI для представления данных, форм ввода, меню, диаграмм и многого другого.
В этой статье вы узнаете, как настроить PrimeNG в проекте Angular 4+, а также изучите некоторые основные компоненты библиотеки.
Требования
- Локальная установка Node.js, которую можно получить, следуя инструкциям для вашего дистрибутива: Mac OS, Ubuntu, CentOS, Debian.
- Глобальная установка Angular CLI. В мануале Шпаргалка по Angular CLI: основные команды и флаги вы найдете больше полезной информации.
Это руководство протестировано на 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: Angular, PrimeNG