Configuration

Global configuration options of the components.

Import #

Configuration is managed by the PrimeNGConfig instance imported from primeng/api and injected via dependency injection.


import { PrimeNGConfig } from 'primeng/api';

Ripple #

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;
    }
}

ZIndex #

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
        };
    }
}

Filter Mode #

Default filter modes to display on DataTable filter menus.


import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

    constructor(private primengConfig: PrimeNGConfig) {}

    ngOnInit() {
        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]
        };
    }
}

Locale #

Set Locale #

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 config: PrimeNGConfig) {}

    ngOnInit() {
        this.config.setTranslation({
            accept: 'Accept',
            reject: 'Cancel',
            //translations
        });
    }
}

ngx-translate #

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));
    }
}

Repository #

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.

API #

Configuration is managed by the Locale API imported from primeng/config.

Locale Options

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