Global configuration options of the components.
Configuration is managed by the PrimeNGConfig instance imported from primeng/api and injected via dependency injection.
import { PrimeNGConfig } from 'primeng/api';
Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled globally by injecting PrimeNGConfig.
import { Component, OnInit } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(private primengConfig: PrimeNGConfig) {}
ngOnInit() {
this.primengConfig.ripple = true;
}
}
ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeNG configuration offers the zIndex property to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeNG.
The ZIndex of all components is increased according to their groups in harmony with each other. When autoZIndex is false, each group increments its zIndex within itself.
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(private primengConfig: PrimeNGConfig) {}
ngOnInit() {
this.primengConfig.zIndex = {
modal: 1100, // dialog, sidebar
overlay: 1000, // dropdown, overlaypanel
menu: 1000, // overlay menus
tooltip: 1100 // tooltip
};
}
}
The nonce value to use on dynamically generated style elements in core.
constructor(private primengConfig: PrimeNGConfig) {
this.primengConfig.csp.set({nonce: '...'});
}
Default filter modes to display on DataTable filter menus.
import { FilterMatchMode, PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(private primengConfig: PrimeNGConfig) {}
ngOnInit() {
this.primengConfig.filterMatchModeOptions = {
text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
};
}
}
A translation is applied using the PrimeNGConfig instance so begin with injecting it. A common location is the application root to initialize the default language used by the components. English is the default language and setTranslation function is used to change the values by passing a Translation object.
import { Component, OnInit } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
constructor(private primengConfig: PrimeNGConfig) {}
ngOnInit() {
this.primengConfig.setTranslation({
accept: 'Accept',
reject: 'Cancel',
//translations
});
}
}
i18n API can easily be integrated with 3rd party libraries such as ngx-translate that even allows dynamically changing the language in the application.
import { Component, OnInit } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(private config: PrimeNGConfig, private translateService: TranslateService) {}
ngOnInit() {
this.translateService.setDefaultLang('en');
}
translate(lang: string) {
this.translateService.use(lang);
this.translateService.get('primeng').subscribe(res => this.config.setTranslation(res));
}
}
Ready to use settings for locales are available at the community supported PrimeLocale repository. We'd appreciate if you could contribute to this repository with pull requests and share it with the rest of the community.
Configuration is managed by the Locale API imported from primeng/config.
Key | Value |
---|---|
startsWith | Starts with |
contains | Contains |
notContains | Not contains |
endsWith | Ends with |
equals | Equals |
notEquals | Not equals |
noFilter | No Filter |
lt | Less than |
lte | Less than or equal to |
gt | Greater than |
gte | Greater than or equal to |
dateIs | Date is |
dateIsNot | Date is not |
dateBefore | Date is before |
dateAfter | Date is after |
clear | Clear |
apply | Apply |
matchAll | Match All |
matchAny | Match Any |
addRule | Add Rule |
removeRule | Remove Rule |
accept | Yes |
reject | No |
choose | Choose |
upload | Upload |
cancel | Cancel |
completed | Completed |
pending | Pending |
fileSizeTypes | ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] |
dayNames | ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] |
dayNamesShort | ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] |
dayNamesMin | ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] |
monthNames | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |
monthNamesShort | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
chooseYear | Choose Year |
chooseMonth | Choose Month |
chooseDate | Choose Date |
prevDecade | Previous Decade |
nextDecade | Next Decade |
prevYear | Previous Year |
nextYear | Next Year |
prevMonth | Previous Month |
nextMonth | Next Month |
prevHour | Previous Hour |
nextHour | Next Hour |
prevMinute | Previous Minute |
nextMinute | Next Minute |
prevSecond | Previous Second |
nextSecond | Next Second |
am | am |
pm | pm |
today | Today |
weekHeader | Wk |
firstDayOfWeek | 0 |
dateFormat | mm/dd/yy |
weak | Weak |
medium | Medium |
strong | Strong |
passwordPrompt | Enter a password |
emptyFilterMessage | No results found' |
searchMessage | {0} results are available |
selectionMessage | {0} items selected |
emptySelectionMessage | No selected item |
emptySearchMessage | No results found |
emptyMessage | No available options |
aria.trueLabel | True |
aria.falseLabel | False |
aria.nullLabel | Not Selected |
aria.star | 1 star |
aria.stars | {star} stars |
aria.selectAll | All items selected |
aria.unselectAll | All items unselected |
aria.close | Close |
aria.previous | Previous |
aria.next | Next |
aria.navigation | Navigation |
aria.scrollTop | Scroll Top |
aria.moveTop | Move Top |
aria.moveUp | Move Up |
aria.moveDown | Move Down |
aria.moveBottom | Move Bottom |
aria.moveToTarget | Move to Target |
aria.moveToSource | Move to Source |
aria.moveAllToTarget | Move All to Target |
aria.moveAllToSource | Move All to Source |
aria.pageLabel | {page} |
aria.firstPageLabel | First Page |
aria.lastPageLabel | Last Page |
aria.nextPageLabel | Next Page |
aria.prevPageLabel | Previous Page |
aria.rowsPerPageLabel | Rows per page |
aria.jumpToPageDropdownLabel | Jump to Page Dropdown |
aria.jumpToPageInputLabel | Jump to Page Input |
aria.selectRow | Row Selected |
aria.unselectRow | Row Unselected |
aria.expandRow | Row Expanded |
aria.collapseRow | Row Collapsed |
aria.showFilterMenu | Show Filter Menu |
aria.hideFilterMenu | Hide Filter Menu |
aria.filterOperator | Filter Operator |
aria.filterConstraint | Filter Constraint |
aria.editRow | Row Edit |
aria.saveEdit | Save Edit |
aria.cancelEdit | Cancel Edit |
aria.listView | List View |
aria.gridView | Grid View |
aria.slide | Slide |
aria.slideNumber | {slideNumber} |
aria.zoomImage | Zoom Image |
aria.zoomIn | Zoom In |
aria.zoomOut | Zoom Out |
aria.rotateRight | Rotate Right |
aria.rotateLeft | Rotate Left |
API defines helper props, events and others for the PrimeNG Configuration module.