This document introduces PrimeNG, an open source library of Angular UI components. It provides over 80 reusable components for common interfaces like dropdowns, dialogs, tables, charts and more. PrimeNG is free to use, has been an open source project for 3 years, and has over 5000 downloads. Examples provided demonstrate how to use various components like dropdowns, dialogs, tables and charts in Angular applications. The document also discusses related libraries, themes, documentation and support options available for PrimeNG.

1. PrimeNG
Componentes Para La Vida Real
Çağatay Çivici

2. Sobre Mí
Fundador de PrimeTek

3. Más Completo Flexibilidad
Temas y Plantillas Código Abierto

5. Tiene
3 Años

7. Proyecto
de
Código Abierto
(MIT)

8. Gratuito

9. 5000+

10. Más de 80
Componentes

11. Instalar
npm install primeng --save
npm install primeicons --save
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
//...
],
import {TableModule} from ‘primeng/table';
<p-table [value]="cars">

15. Ejemplo
-
Dropdown

16. <p-dropdown [options]="cities" [(ngModel)]="selectedCity"
optionLabel="name"></p-dropdown>
export class MyModel {
cities: City[];
selectedCity: City;
constructor() {
//An array of cities
this.cities = [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Sevilla', code: ‘SVL'}
];
}
}
Dropdown

17. DEMO

19. DataTable
<p-dataTable [value]="cars">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>

20. Table

21. Table
<p-table [value]="cars">
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>{{car.vin}}</td>
<td>{{car.year}}</td>
<td>{{car.brand}}</td>
<td>{{car.color}}</td>
</tr>
</ng-template>
</p-table>

22. Directivas
<p-table [value]="cars">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn>Vin</th>
<th pSortableColumn>Year</th>
<th pSortableColumn>Brand</th>
<th pSortableColumn>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr [pSelectableRow]=“car”>
<td>{{car.vin}}</td>
<td>{{car.year}}</td>
<td>{{car.brand}}</td>
<td>{{car.color}}</td>
</tr>
</ng-template>
</p-table>

23. DEMO

24. Elementos
Emergentes

25. Ejemplo
-
Dialog

26. Diálogo
<p-dialog header="Godfather
I" [(visible)]="display" [modal]=“true" [maximizable]="true">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia
family, oversees his daughter's wedding. His beloved son Michael has just come
home from the war, but does not intend to become part of his father's
business. Through Michael's life the nature of the family business becomes
clear. The business of the family is just like the head of the family, kind
and benevolent to those who give respect,but given to ruthless violence
whenever anything stands against the good of the family.</p>
<p-footer>
<button type="button" pButton icon="pi pi-
check" (click)="display=false" label="Yes"></button>
<button type="button" pButton icon="pi pi-
close" (click)="display=false" label="No" class="ui-button-secondary"></
button>
</p-footer>
</p-dialog>

27. Diálogo Dinámico
show() {
const ref = this.dialogService.open(CarsListDemo, {
header: 'Choose a Car',
width: '70%'
});
ref.onClose.subscribe((car: Car) => {
if (car) {
this.messageService.add({severity:'info', summary: 'Car
Selected', detail:'Vin:' + car.vin});
}
});
}
DialogService

28. DEMO

30. Ejemplo - TabView

31. TabView
<p-tabView>
<p-tabPanel header="Header 1">
Content 1
</p-tabPanel>
<p-tabPanel header="Header 2">
Content 2
</p-tabPanel>
<p-tabPanel header="Header 3">
Content 3
</p-tabPanel>
</p-tabView>
<p-tabView>
<p-tabPanel [header]="item.header" *ngFor="let item of items; let i = index"
[selected]=“i == 0">
{{item.content}}
</p-tabPanel>
</p-tabView>

32. DEMO

34. Ejemplo
-
ContextMenu

35. ContextMenu
<p-contextMenu [model]=“items"></p-contextMenu>
export class ContextMenuDemo {
private items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'File',
items: [{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{label: 'Project'},
{label: 'Other'},
]
},
{label: 'Open'},
{label: 'Quit'}
]
}
];
}
}

36. DEMO

38. Ejemplo
-
Toast

39. Toast
<p-toast></p-toast>
import {Component} from '@angular/core';
import {MessageService} from 'primeng/api';
@Component({
templateUrl: './my.component.html'
})
export class MyComponent {
constructor(private messageService: MessageService) {}
addSingle() {
this.messageService.add({severity:'success', summary:'Service Message', detail:'Via
MessageService'});
}
clear() {
this.messageService.clear();
}
}
MessageService

40. DEMO

42. Ejemplo
-
PieChart

43. Chart
<p-chart type="pie" [data]="data"></p-chart>
export class PieChartDemo {
data: any;
constructor() {
this.data = {
labels: ['A','B','C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
}
}

44. DEMO

45. FileUpload

46. FileUpload
<p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)"
multiple="multiple" accept="image/*" maxFileSize="1000000">
<ng-template pTemplate="content">
<ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
</ul>
</ng-template>
</p-fileUpload>
export class FileUploadDemo {
uploadedFiles: any[] = [];
constructor(private messageService: MessageService) {}
onUpload(event) {
for(let file of event.files) {
this.uploadedFiles.push(file);
}
this.messageService.add({severity: 'info', summary: 'File Uploaded', detail: ''});
}
}

47. DEMO

48. Librerías de Terceros
Google Maps
FullCalendar
Quill Editor
Charts
Recaptcha

49. Ejemplo - FullCalendar

50. FullCalendar
<p-fullCalendar [events]="events"></p-fullCalendar>
export class MyModel {
events: any[];
ngOnInit() {
this.eventService.getEvents().then(events => {this.events = events;});
}
}
@Injectable()
export class EventService {
constructor(private http: Http) {}
getEvents() {
return this.http.get('showcase/resources/data/calendarevents.json')
.toPromise()
.then(res => <any[]> res.json().data)
.then(data => { return data; });
}
}

51. DEMO

52. PrimeFlex
npm install primeflex —save

53. PrimeIcons
npm install primeicons —save
<i class="pi pi-check"></i>
<i class="pi pi-times"></i>

54. Diseño Adaptable

56. ARIA ROLES

57. Teclado - Ejemplo 1

58. Teclado
Ejemplo 2

59. LOS TEMAS

63. El Diseñador

64. LAS PLANTILLAS

66. Dependencias

67. Material

68. Bootstrap

69. Documentacíon

70. El Libro

71. Apoyo Tecnico
El Foro PRO
Seguimiento de
Incidentes

72. El Foro de Comunidad

73. GitHub

74. PrimeNG PRO

75. La Hoja de Ruta

76. Preguntas
🤔