PrimeNg (Angular)

General

Installation

npm install primeng --save
npm install primeicons --save
npm install font-awesome --save

fa-fw: Fixed Width

angular.json

Hier wird omega/theme.css verwendet, es gibt jedoch verschiedene verfügbare Themes:

"styles": [
  "src/styles.css",
  "node_modules/primeicons/primeicons.css",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "node_modules/primeng/resources/themes/omega/theme.css",
  "node_modules/primeng/resources/primeng.min.css"
],

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  ...
],

Table

Table

TreeTable

app.module.ts

import { AccordionModule } from 'primeng/accordion';
import { TreeTableModule } from 'primeng/treetable';

imports: [
  ...
  TreeTableModule,
  AccordionModule,
  ...
],

Inline Editing

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

imports: [
  ...
  FormsModule,
  ReactiveFormsModule,
  ...
],

Pagination

import { PaginatorModule } from 'primeng/paginator';

imports: [
  ...
  PaginatorModule,
  ...
],

Context Menü

import { ContextMenuModule } from 'primeng/contextmenu';

imports: [
  ...
  ContextMenuModule
  ...
],

Panel

import { PanelModule } from 'primeng/panel';

imports: [
  ...
  PanelModule
  ...
],

Links

Tutorial

https://www.primefaces.org/primeng/

Grid

https://www.primefaces.org/showcase/ui/panel/grid.xhtml

https://github.com/primefaces/primeng/blob/master/src/app/components/grid/grid.css

Demos

https://github.com/primefaces/primeng

Icons

Font Awesome

https://fontawesome.com/v4.7.0/icons/

https://fontawesome.com/v4.7.0/examples/

Zurück zu JavaScript