website·Indexed 34 days ago
https://v17.primeng.orgA comprehensive UI component suite for Angular. This documentation for v17 covers a wide range of components including Paginator, FileUpload, Galleria, Carousel, and TabMenu, as well as global configuration, theming, accessibility guides, and localization using the Locale API from @primeng/config.
PrimeNG uses a design-agnostic architecture that separates styling into two parts:
This separation allows PrimeNG to support various design systems (like Material or Bootstrap) without enforcing a specific look.
<!-- Example of using a custom meter template --> <p-meterGroup [value]="data"> <ng-template pTemplate="meter" let-item> <div [class]="item.class" [style.width]="item.size"> {{ item.$implicit.label }} </div> </ng-template> </p-meterGroup>
items array of the affected elements. Selection events include the originalEvent (browser event) and the items array. Filter events provide the query string and the resulting value (filtered items array).ConfirmDialog component emits the onHide event when the dialog is closed. This event provides a ConfirmEventType object containing details about the closure.<p-confirmDialog (onHide)="onDialogHide($event)"></p-confirmDialog>When using the item template, the ScrollerItemOptions interface provides metadata about the specific item being rendered, which is useful for conditional styling or logic:
index: The numeric index of the item.count: Total item count.first: Boolean indicating if this is the first element in the viewport.last: Boolean indicating if this is the last element in the viewport.even/odd: Booleans indicating if the index is even or odd.p-divider component is used to separate content visually. It supports both horizontal and vertical orientations, various border styles (solid, dashed, dotted), and content alignment.virtualScroll and specifying the virtualScrollItemSize. When combined with lazy loading and the onLazyLoad event, the table can fetch data in chunks as the user scrolls. Use the loadingbody template to display skeleton screens while data is being loaded.<p-table
[value]="virtualCars"
[scrollable]="true"
scrollHeight="400px"
[rows]="100"
[virtualScroll]="true"
[virtualScrollItemSize]="46"
[lazy]="true"
(onLazyLoad)="loadCarsLazy($event)">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" style="width: 20%;">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr style="height:46px">
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="loadingbody" let-columns="columns">
<tr style="height:46px">
<td *ngFor="let col of columns; let even = even">
<p-skeleton [ngStyle]="{'width': even ? (col.field === 'year' ? '30%' : '40%') : '60%'}" />
</td>
</tr>
</ng-template>
</p-table>item template. Check if the menu item has a route property to apply [routerLink]; otherwise, use a standard [href] for external URLs.<p-contextMenu [target]="span" [model]="items">
<ng-template pTemplate="item" let-item>
<ng-container *ngIf="item.route; else elseBlock">
<a [routerLink]="item.route" class="p-menuitem-link">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
</a>
</ng-container>
<ng-template #elseBlock>
<a [href]="item.url" class="p-menuitem-link">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
</a>
</ng-template>
</ng-template>
</p-contextMenu>